美浩工作室是一个以90后团队为主的网站设计，制作，优化，维护为一体的网站建设工作室，为您量身定制适合企业自身的网站，欢迎咨询：15249241469
> 网站前端 > JavaScript > js与jquery实现搜索框提示文字显示与隐藏

js与jquery实现搜索框提示文字显示与隐藏

JavaScript mihoweb 8164℃ 4评论

在做网站搜索时，我们往往会想到一种很人性化的一点，就是显示提示文字，一般这种效果很多见的，通俗的讲就是鼠标不放上的时候，显示一个“请输入文字”，鼠标放上去的时候，这个文字消失，用js的理解的话，就是鼠标获得焦点的时候更换input的value值，好了，这种效果的代码写法有很多种，大家先看代码：

方法一：一行js代码搞定

  1. <input type=“text” name=“s” value=“提示文字” onfocus=“if (value ==’提示文字’){value =”}” onblur=“if (value ==”){value=’提示文字’}” />  

方法二：一段简单的jquery搞定

先上html的form的代码

  1. <form action=“” method=“post”>     
  2. <input type=“text” name=“keyword” id=“keyword” value=“请输入关键词！”/>     
  3. <input type=“submit” name=“submit” value=“提交”/>     
  4. </form>    

再是jquery的代码：

  1. $(document).ready(function()    {         
  2. //搜索框      
  3.     $(‘#keyword’).focus(function() {      
  4.         if($(this).val() == ’请输入关键词！’) {      
  5.             $(this).val(“”);      
  6.         }      
  7.     });      
  8.     $(‘#keyword’).blur(function(){      
  9.         if($(this).val() == “”) {      
  10.             $(this).val(‘请输入关键词！’);      
  11.         }      
  12.     });      
  13. });    

针对于以上这两种方法，其实都是不错的，不过，我觉得都是可以实现需求的。

但是这两种都有一个bug，就是当用户在浏览器端禁止了js的话，搜索框中就显示的是那个“请输入关键字！”，用户搜索的时候只能用最伟大的Backspace键来一个个的删除了，这个是没有办法的。（是不是有点烦呢），不过呢，其实还有其他的方法的。

好了，以上就是js与jquery实现搜索框提示文字显示与隐藏的方法啦！！！！其实还可以有更多的技巧的，不过还是要开动大家的大脑哦，更多的效果等着你！

如果您喜欢这篇文章，欢迎分享订阅美浩工作室。

Incoming search terms:

  • js搜索框
  • js搜索提示
  • js 搜索框
  • 搜索框js
  • 搜索框 js
  • js搜索
  • js 搜索提示
  • JS搜索框提示
  • jquery 搜索框
  • js 搜索框提示

转载请注明：美浩工作室官方博客 » js与jquery实现搜索框提示文字显示与隐藏

喜欢 (3)