js实现简单输入框

最新推荐文章于 2023-04-03 12:53:53 发布

原创最新推荐文章于 2023-04-03 12:53:53 发布 · 6.6k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

WEB

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>doc</title>
    <style>
        input{
            color: #999;
        }
    </style>
</head>
<body>
    <div>
        <input class="te" type="text" value="手机"  id="tex">
    </div>
<!--    getElementById 是通过id来获取元素，id在HTML中是唯一的，所以获取到的只有一个元素。-->

<!--    getElementsByTagNam 是通过标签名来获取元素，一种标签在HTML中可以有多个，所以获取到的是多个元素，且返回是以集合的形式返回。-->

<!--    getElementsByClassName 是通过类名来获取元素，同名的类在HTML中也能存在多个，所以获取到的也是多个元素，同样是以集合的形式反回。-->

    <script type="text/javascript">
        // var text = document.getElementById('tex');
        // text.οnfοcus=function (){
        //     console.log('得到了焦点')
        // }
        //
        // text.onblur = function (){
        //     console.log('失去了焦点');
        // }
        // var text = document.getElementsByClassName('te')[0];
        // text.οnfοcus=function (){
        //     console.log('得到了焦点')
        // }
        // text.onblur = function (){
        //     console.log('失去了焦点');
        // }

        var text = document.querySelector('.te');
        var flag = 0;
        text.onfocus=function (){
         //   this.style.display='none';  隐藏
         //   this.style.display='block';  显示
            if(this.value=='手机')
                this.value= '';
            this.style.color='#333';
            flag=1;
        }
        text.onblur = function (){
            if(this.value=='')
                this.value='手机';
            this.style.color = '#999';
            console.log('失去了焦点');

        }
    </script>
</body>
</html>

标签

#javascript #html5