HTML部分:
<
form
id
="testform"
>
<
input
type
="text"
class
="clear"
value
="Always cleared"
/>
< input type ="text" class ="clear once" value ="Cleared only once" />
< input type ="text" value ="Normal text" />
</ form >
< input type ="text" class ="clear once" value ="Cleared only once" />
< input type ="text" value ="Normal text" />
</ form >
JavaSript部分:
$(
function() {
查看Demo
//
取出有clear类的input域
// (注: "clear once" 是两个class clear 和 once)
$( ' #testform input.clear ' ).each( function (){
// 使用data方法存储数据
$( this ).data( " txt " , $.trim($( this ).val()) );
}).focus( function (){
// 获得焦点时判断域内的值是否和默认值相同,如果相同则清空
if ( $.trim($( this ).val()) === $( this ).data( " txt " ) ) {
$( this ).val( "" );
}
}).blur( function (){
// 为有class clear的域添加blur时间来恢复默认值
// 但如果class是once则忽略
if ( $.trim($( this ).val()) === "" && ! $( this ).hasClass( " once " ) ) {
// Restore saved data
$( this ).val( $( this ).data( " txt " ) );
}
});
});
// (注: "clear once" 是两个class clear 和 once)
$( ' #testform input.clear ' ).each( function (){
// 使用data方法存储数据
$( this ).data( " txt " , $.trim($( this ).val()) );
}).focus( function (){
// 获得焦点时判断域内的值是否和默认值相同,如果相同则清空
if ( $.trim($( this ).val()) === $( this ).data( " txt " ) ) {
$( this ).val( "" );
}
}).blur( function (){
// 为有class clear的域添加blur时间来恢复默认值
// 但如果class是once则忽略
if ( $.trim($( this ).val()) === "" && ! $( this ).hasClass( " once " ) ) {
// Restore saved data
$( this ).val( $( this ).data( " txt " ) );
}
});
});