jQuery 文本框得失焦点应用

一、文本框得失焦点一种是改变文本框的样式
    得到焦点:

          jQuery  文本框得失焦点应用
    失去焦点

jQuery  文本框得失焦点应用
二、文本框得失焦点另一种是改变文本框的值
    得到焦点:

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>
上一篇:SpringMVC Controller介绍及常用注解


下一篇:SpringMVC Controller介绍及常见注解