js与jquery实现搜索框提示文字显示与隐藏
2016-03-02 20:57
706 查看
在做网站搜索时,我们往往会想到一种很人性化的一点,就是显示提示文字,一般这种效果很多见的,通俗的讲就是鼠标不放上的时候,显示一个“请输入文字”,鼠标放上去的时候,这个文字消失,用js的理解的话,就是鼠标获得焦点的时候更换input的value值,好了,这种效果的代码写法有很多种,大家先看代码:
方法一:一行js代码搞定
方法二:一段简单的jquery搞定
先上html的form的代码
再是jquery的代码:
转载自:http://www.9958.pw/post/js_search_input_title
方法一:一行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('请输入关键词!'); } }); });
转载自:http://www.9958.pw/post/js_search_input_title
相关文章推荐
- 利用jQuery中hover()和cookie机制编写的小程序
- jQuery--加一行减一行
- jQuery--后台主机列表编辑
- IE8 jquery ajax获取静态资源报错TypeError 拒绝访问
- JqueryEasyUi
- jQuery与其他JS库的共存问题
- 关于jQuery新的事件绑定机制on()的使用技巧
- jquery.blockUI.2.31.js 弹出层项目介绍
- MVC+jQuery 无刷新导出EXCEL的过程(伪excel格式)
- jquery noConflict
- JQuery-复选框的操作(摘自<锋利的JQuery>)
- jquery function Optional Arguments
- jQuery的ready()事件与js中的onload事件的区别
- jquery表单验证框架 jquery.validate.min.js的使用
- jquery自学
- 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比。
- jQuery MiniUI 在线示例
- jquery 的mmgrid 加载数据时的传参数的方式
- 用jquery 实现 超出字符 截断加上省略号并且可以提示全部内容
- <学习笔记> jQuery插件