搜索文本框

最新推荐文章于 2022-09-04 17:41:22 发布

山山而川-T

最新推荐文章于 2022-09-04 17:41:22 发布

阅读量313

点赞数

分类专栏： JavaScript学习

本文链接：https://blog.csdn.net/Valentine_T/article/details/104203453

版权

JavaScript学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

设置搜索文本框的样式

如下图所示为搜索文本框的默认样式，当文本框获得焦点时，清空文本框，并且让输入字体变为黑色；当文本框失去焦点时，如果文本框里的内容为空，则还原文本框里的文字，并且让字体颜色变为灰色
完成以上要求，我新掌握了2个事件：

onblur 事件会在对象失去焦点时发生
onfocus 事件在对象获得焦点时发生

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
  .gray {
   color: gray;
  }
  .black {
   color: black;
  }
 </style>
</head>
<body>
 <input type="text" class="gray" value = "请输入搜索关键字" id= "txtSearch">
 <input type="button" value="搜索" id = "btnSearch">
 <script type="text/javascript">
  //当文本框获得焦点， 清空文本框，并且让字体变为黑色
  //当文本框失去焦点 如果文本框内容为空 还原文本框的文字，并且让字体变为灰色
  var txtSearch = document.getElementById('txtSearch');
  //获取焦点的事件 focus
  txtSearch.onfocus = function () {
     this.value = '';
    this.className= "black"
    }
  //当文本框失去焦点时，如果文本框里的内容为空 还原文本框里的文字，并且让字体颜色变为灰色
  txtSearch.onblur = function () {
   var y = this.value.length
   if (y === 0){
    this.value = '请输入搜索关键字';
    this.className = 'gray';
   }
  }
 </script> 
</body>
</html>

山山而川-T

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
搜索文本框

设置搜索文本框的样式如下图所示为搜索文本框的默认样式，当文本框获得焦点时，清空文本框，并且让字体变为黑色；当文本框失去焦点时，如果文本框里的内容为空，则还原文本框里的文字，并且让字体颜色变为灰色完成以上要求，我新掌握了2个事件：onblur 事件会在对象失去焦点时发生onfocus 事件在对象获得焦点时发生代码如下：在这里插入代码片...
复制链接

扫一扫