文本框获取焦点

作者: Yuann | 来源:发表于2017-09-21 21:39 被阅读0次

JavaScript一些实用代码记录1
文本框获取焦点
手动获取文本框焦点
DOM操作二
Vue中高德地图的使用
CSS2
Vue.js 学习笔记（二）
UITextField
android文本输入框输入完成自动跳到下一个输入框
限制输入字符串的长度

文本框获取焦点.jpg

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        input {
            width: 300px;
            height: 36px;
            padding-left: 5px;
            color: #ccc;
        }
        label {
            position: absolute;
            top: 82px;
            left: 56px;
            font-size: 12px;
            color: #ccc;
            cursor: text;
        }
        .hide {
            display: none;
        }
        .show {
            display: block;
        }
    </style>
</head>
<body>
    京东:<input id="inp1" type="text" value="我是京东"/><br><br>
    淘宝:<label for="inp2">我是淘宝</label><input id="inp2" type="text"/><br><br>
    placeholder:<input type="text" placeholder="我是placeholder"/>

    <script>
        //需求：京东的获取焦点。
        //思路：京东的input按钮获取了插入条光标立刻删除内容。失去插入条光标显示文字。
        //步骤：
        //1.获取事件源和相关元素
        //2.绑定事件
        //3.书写事件驱动程序

        //1.获取事件源和相关元素
        var inp1 = document.getElementById("inp1");
        //2.绑定事件(获取焦点事件)
        inp1.onfocus = function () {
            //判断，如果input里面的内容是“我是京东”，那么把值赋值为“”；
            if(this.value === "我是京东"){
//                inp1.style.color = "#000";
                inp1.value = "";
            }
        }
        //(失去焦点事件)焦点：插入条光标
        inp1.onblur = function () {
            //失去焦点后判断，如果input内容为空，那么把内容赋值为我是京东。
            if(this.value === ""){
                //3.书写事件驱动程序
//                inp1.style.color = "#ccc";
                inp1.value = "我是京东";
            }
        }


        //需求：淘宝的获取焦点。
        //思路：在input中输入文字，label标签隐藏，里面的文字变成空字符串，label显示。
        //步骤：
        //1.获取事件源和相关元素
        //2.绑定事件
        //3.书写事件驱动程序

        //1.获取事件源和相关元素
        var inp2 = document.getElementById("inp2");
        var lab = document.getElementsByTagName("label")[0];
        //2.绑定事件(输入事件，文字的输入和删除都会触动这个事件)
        //获取插入条光标
//        inp2.focus();
        inp2.oninput = function () {
            //3.书写事件驱动程序
            //判断input中的值是否为空，如果为空，那么label显示，否则隐藏。
            if(this.value === ""){
                lab.className = "show";
            }else{
                lab.className = "hide";
            }
        }




    </script>

</body>
</html>