码迷,mamicode.com
首页 > 其他好文 > 详细

显示隐藏文本框文字

时间:2020-06-11 16:52:38      阅读:46      评论:0      收藏:0      [点我收藏+]

标签:color   col   隐藏   set   query   focus   ===   document   his   

代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <style type="text/css">
            input{ color: #999; outline: none;}
        </style>
    </head>
    <body>
        <div>
            <input type="text" value="手机" />
        </div>
        <script>
            //1. 获取元素
            var text = document.querySelector("input");
            //2. 注册事件 获得焦点 onfocus
            text.onfocus = function() {
                if(this.value ==="手机") {
                    this.value = "";    
                }
                // 获得焦点需要把文本框里面的文字颜色变黑
                this.style.color = "#000";
            }
            //3. 注册事件 失去焦点事件 onblur
            text.onblur = function() {
                if(this.value ===""){
                    this.value = "手机";
                    // 失去焦点需要把文本框里面的文字颜色变浅色
                    this.style.color = "#999";
                }
            }
        </script>
    </body>
</html>

 

显示隐藏文本框文字

标签:color   col   隐藏   set   query   focus   ===   document   his   

原文地址:https://www.cnblogs.com/XiaoJun6/p/13093803.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!