在做网站搜索时,我们往往会想到一种很人性化的一点,就是显示提示文字,一般这种效果很多见的,通俗的讲就是鼠标不放上的时候,显示一个“请输入文字”,鼠标放上去的时候,这个文字消失,用js的理解的话,就是鼠标获得焦点的时候更换input的value值,好了,这种效果的代码写法有很多种,大家先看代码:
方法一:一行js代码搞定
- <input type=“text” name=“s” value=“提示文字” onfocus=“if (value ==’提示文字’){value =”}” onblur=“if (value ==”){value=’提示文字’}” />
方法二:一段简单的jquery搞定
先上html的form的代码
- <form action=“” method=“post”>
- <input type=“text” name=“keyword” id=“keyword” value=“请输入关键词!”/>
- <input type=“submit” name=“submit” value=“提交”/>
- </form>
再是jquery的代码:
- $(document).ready(function() {
- //搜索框
- $(‘#keyword’).focus(function() {
- if($(this).val() == ’请输入关键词!’) {
- $(this).val(“”);
- }
- });
- $(‘#keyword’).blur(function(){
- if($(this).val() == “”) {
- $(this).val(‘请输入关键词!’);
- }
- });
- });
针对于以上这两种方法,其实都是不错的,不过,我觉得都是可以实现需求的。
但是这两种都有一个bug,就是当用户在浏览器端禁止了js的话,搜索框中就显示的是那个“请输入关键字!”,用户搜索的时候只能用最伟大的Backspace键来一个个的删除了,这个是没有办法的。(是不是有点烦呢),不过呢,其实还有其他的方法的。
好了,以上就是js与jquery实现搜索框提示文字显示与隐藏的方法啦!!!!其实还可以有更多的技巧的,不过还是要开动大家的大脑哦,更多的效果等着你!
如果您喜欢这篇文章,欢迎分享订阅美浩工作室。
Incoming search terms:
- js搜索框
- js搜索提示
- js 搜索框
- 搜索框js
- 搜索框 js
- js搜索
- js 搜索提示
- JS搜索框提示
- jquery 搜索框
- js 搜索框提示
转载请注明:美浩工作室官方博客 » js与jquery实现搜索框提示文字显示与隐藏