JavaScript.Dom案例，显示隐藏文本框内容

最新推荐文章于 2023-04-14 11:13:26 发布

花花花菜

最新推荐文章于 2023-04-14 11:13:26 发布

阅读量238

点赞数

分类专栏： javascript DOM 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_59075169/article/details/123797132

版权

javascript 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

DOM

1 篇文章 0 订阅

订阅专栏

DOM案例：显示隐藏文本框内容

当鼠标点击文本框时，里面的默认文字隐藏，当鼠标离开文本框时，里面的文字显示

案例分析
1 .首先表单需要2个新事件，获得焦点onfocus,失去焦点onblur
2 . 如果获得焦点，判断表单里面内容是否为默认文字，如果是默认文字，就清空表单内容
3 .如果失去焦点，判断表单内容是否为空，如果为空，则表单内容改为默认文字

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</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='#333';
}
// 3：注册事件 获得焦点事件 onfocus
text.onblur=function(){
   console.log('失去了焦点'); //验证是否失去
   if(this.value===''){
       this.value='手机';
   }
}
   </script>
</body>
</html>