jQuery 文本框得失焦点的简单实例
2014-02-19 00:00
363 查看
版本一
css代码部分:
当焦点获得时,添加focus样式,添加边框,并改背景色为#fcc
html代码部分:
这里有两个input,一个textare框。
:input匹配 所有 input, textarea, select 和 button 元素。
jQuery代码部分:
用:input匹配所有的input元素,当获取焦点时,就添加样式focus,通过$(this)自动识别当前的元素。focus()方法是获取焦点事件发生时执行的函数。blur()方法是失去焦点事件发生时执行的函数。
版本二:
有时候文本框里有默认的内容,作为提示信息,获取焦点后,要让它消失。可以做如下的改造:
做个逻辑判断,如果值为默认值,就将文本框中的内容清空。
失去焦点,如果文本框中为空,也就是没有输入内容,就将值还设为默认值。
这是一个简单的逻辑。
css代码部分:
.focus { border: 1px solid #f00; background: #fcc; }
当焦点获得时,添加focus样式,添加边框,并改背景色为#fcc
html代码部分:
<body> <form action="" method="post" id="regForm"> <fieldset> <legend>个人基本信息</legend> <div> <label for="username">名称:</label> <input id="username" type="text" /> </div> <div> <label for="pass">密码:</label> <input id="pass" type="password" /> </div> <div> <label for="msg">详细信息:</label> <textarea id="msg" rows="2" cols="20"></textarea> </div> </fieldset> </form> </body>
这里有两个input,一个textare框。
:input匹配 所有 input, textarea, select 和 button 元素。
jQuery代码部分:
<script type="text/javascript"> $(function(){ $(":input").focus(function(){ $(this).addClass("focus"); }).blur(function(){ $(this).removeClass("focus"); }); }) </script>
用:input匹配所有的input元素,当获取焦点时,就添加样式focus,通过$(this)自动识别当前的元素。focus()方法是获取焦点事件发生时执行的函数。blur()方法是失去焦点事件发生时执行的函数。
版本二:
有时候文本框里有默认的内容,作为提示信息,获取焦点后,要让它消失。可以做如下的改造:
<script type="text/javascript"> $(function(){ $(":input").focus(function(){ $(this).addClass("focus"); if($(this).val() ==this.defaultValue){ $(this).val(""); } }).blur(function(){ $(this).removeClass("focus"); if ($(this).val() == '') { $(this).val(this.defaultValue); } }); }) </script>
做个逻辑判断,如果值为默认值,就将文本框中的内容清空。
失去焦点,如果文本框中为空,也就是没有输入内容,就将值还设为默认值。
这是一个简单的逻辑。
相关文章推荐
- jQuery 文本框得失焦点的简单实例
- jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
- jquery中提交文本框失去焦点 与获取焦点的实例
- jquery实现input框获取焦点的简单实例
- jQuery的简单应用-实现文本框获取焦点时改变样式
- jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
- JQuery中使文本框获得焦点的方法实例分析
- jQuery之文本框得失焦点
- jQuery之文本框得失焦点
- JQuery中使文本框获得焦点的方法实例分析
- jQuery实现回车键(Enter)切换文本框焦点的代码实例
- jQuery实现回车键(Enter)切换文本框焦点的代码实例
- jQuery 文本框得失焦点应用
- jQuery之文本框得失焦点
- jQuery之文本框得失焦点
- 文本框文本域提示自动显示隐藏jQuery小插件实例页面
- jQuery实现动态表单验证时文本框抖动效果完整实例
- 简单的 jQuery 浮动层随窗口滚动滑动插件实例
- jquery实现一个简单的表单验证实例
- jQuery点击自身以外地方关闭弹出层的简单实例