input内容鼠标点击消失,鼠标移走恢复

两种方法,一为input动作,一为JQ控制。

第一种,最简单的办法

就是直接在input表单里加上 onfocus="this.value=''" onblur="this.value=''"即<input type="text" value="1111" onfocus="this.value=''" onblur="this.value='1111'"/>

第二种,用jquery实现:(网上找的例子)

$(function() {
//取出有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") );
    }
  });
});

 示例:

<input type="text" class="clear" value="Always cleared" />
<input type="text" class="clear once" value="Cleared only once" />
<input type="text" value="Normal text" />

posted @ 2012-08-10 08:52  lonelystarxing  阅读(859)  评论(0编辑  收藏  举报