zoukankan      html  css  js  c++  java
  • 显示隐藏文本框文字

    代码如下:

    <!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>
  • 相关阅读:
    LIS
    原根
    数三角形
    组合数问题
    最短路问题
    2020总结
    树状数组
    康托展开
    LCA
    并查集
  • 原文地址:https://www.cnblogs.com/XiaoJun6/p/13093803.html
Copyright © 2011-2022 走看看