美浩工作室是一个以90后团队为主的网站设计,制作,优化,维护为一体的网站建设工作室,为您量身定制适合企业自身的网站,欢迎咨询:15249241469

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

JavaScript mihoweb 5450℃ 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)