显示隐藏文本框内容

朴灿烈づ我的快乐病毒、 2023-10-02 09:14 54阅读 0赞

显示隐藏文本框内容

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>显示隐藏文本框内容</title>
        <style>
            input {
          
                color: #999;
            }
        </style>
    </head>
    
    <body>
        <input type="text" value="手机">
    
        <script>
            // 1.获取元素
            var text = document.querySelector('input');
    
            // 2.注册事件 获得焦点事件 onfocus 
            text.onfocus = function () {
          
                // console.log('得到了焦点');
                if (this.value === '手机') {
          
                    this.value = '';
                }
    
                // 获得焦点需要把文本框里面的文字颜色变黑
                this.style.color = '#1e1f1c';
            }
    
            // 3. 注册事件 失去焦点事件 onblur
            text.onblur = function () {
          
                // console.log('失去了焦点');
                if (this.value === '') {
          
                    this.value = '手机';
                }
                // 失去焦点需要把文本框里面的文字颜色变浅色
                this.style.color = '#999';
            }
        </script>
    
    </body>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，54人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery 入门教程(5): 显示/隐藏内容

jQuery的hide()和show()可以用来显示和隐藏内容。比如下面的例子：jQuery的hide()和show() 可以用来显示和隐藏内容。比如下面的例子： \

桃扇骨/ 2023年10月16日 19:04/ 0 赞/ 101 阅读

相关显示隐藏文本框内容

显示隐藏文本框内容 <!DOCTYPE html> <html lang="en"> <head> <meta charse

朴灿烈づ我的快乐病毒、/ 2023年10月02日 09:14/ 0 赞/ 55 阅读

相关 bootstrapTable内容过长时隐藏一部分，悬浮显示完整内容

bootstrapTable如何设置内容过长时隐藏部分内容，鼠标悬浮换行显示完整内容解决方法：我这里value是数组，悬浮时完整内容换行显示 \{

红太狼/ 2023年07月20日 10:59/ 0 赞/ 66 阅读

相关清除input文本框内容

清除input文本框内容效果： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR

朴灿烈づ我的快乐病毒、/ 2023年06月24日 13:25/ 0 赞/ 38 阅读

相关显示隐藏文件和显示隐藏扩展名

显示隐藏文件、扩展名 \`缺点：要手刷新一下，才能看到效果\` XP 隐藏和显示：文件显示和隐藏：扩展名 WIN10

￡神魔★判官ぃ/ 2022年12月31日 04:26/ 0 赞/ 303 阅读

相关元素内容超出隐藏显示省略号

1.单行元素超出隐藏显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowr

待我称王封你为后i/ 2022年12月01日 03:40/ 0 赞/ 342 阅读

相关内容的显示或隐藏、变换图片、检测当前内容的隐藏或显示状态

内容的显示：$(".clsContent").css("display","block"); 内容的隐藏：$(".clsContent").css("display","no

谁践踏了优雅/ 2022年07月11日 16:23/ 0 赞/ 285 阅读

相关 HTML隐藏文本框

1、<input type="hidden" value=""></input>对所有的文本框都起作用（隐藏域，多用于存数据） 2、<input type=

末蓝、/ 2022年05月15日 02:51/ 0 赞/ 375 阅读

相关 table内容超长自动隐藏，鼠标放置后浮动显示全部内容

目录问题描述解决思路相关代码 1.限定td的宽度 2.内容特殊处理 3.全局指定动态指定css样式 4.效果如下延伸贴两个关于rem/em/px介绍

梦里梦外;/ 2022年03月19日 16:57/ 0 赞/ 500 阅读

相关 td标签显示过多内容隐藏部分内容为省略号，鼠标悬停显示全部内容

样式： \c\_td\{ max-width:10px; overflow: hidden; white-spa

灰太狼/ 2021年11月29日 16:18/ 0 赞/ 684 阅读