首页 > 代码库 > jQuery 文本框得失焦点应用
jQuery 文本框得失焦点应用
一、文本框得失焦点一种是改变文本框的样式
得到焦点:
失去焦点:
二、文本框得失焦点另一种是改变文本框的值
得到焦点:
失去焦点:
三、jQuery 得失焦点代码
1、改变文本框样式代码
1> CSS代码
.focus { border: 1px solid #f00; background: #fcc; }
2>jQuery代码 (:input匹配 所有 input, textarea, select 和 button 元素)
<script type="text/javascript"> $(function(){ $(":input").focus(function(){ $(this).addClass("focus"); }).blur(function(){ $(this).removeClass("focus"); }); }) </script>
2、改变文本框值的代码
1>jQuery代码
用: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 文本框得失焦点应用
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。