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

操作元素之显示隐藏文本框内容

时间:2020-01-05 00:00:53      阅读:98      评论:0      收藏:0      [点我收藏+]

标签:图片   select   判断   height   焦点事件   func   tor   text   fun   

案例分析:

①首先表单需要2个新事件,获得焦点onfocus,失去焦点onblur;

②如果获得焦点,判断表单里面内容是否为默认文字,如果是默认文字,就清空表单内容;

效果:

技术图片

代码:

 1 <body>
 2         <input type="text" value="我想你了">
 3     </body>
 4     <script>
 5         //1.获取元素
 6         var text=document.querySelector("input");
 7         //2.注册事件 获得焦点事件 onfocus
 8         text.onfocus=function(){
 9             if(this.value === "我想你了"){
10                 this.value = "";
11                 //获得焦点把文本框里面的文字颜色变黑
12                 this.style.color = "black";
13             }
14         }
15         //3.失去焦点事件 onblur
16         text.onblur=function(){
17             if(this.value === ""){
18                 this.value = "我想你了";
19                 //失去焦点把文本框里面的文字颜色变浅
20                 this.style.color = "grey";
21             }
22         }
23     </script>

操作元素之显示隐藏文本框内容

标签:图片   select   判断   height   焦点事件   func   tor   text   fun   

原文地址:https://www.cnblogs.com/cy1227/p/12150761.html

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