如何删除焦点上输入的默认值

Question

我有一个输入框,其中分配了默认值文本.当用户关注字段时,如何删除此文本::

码

<input type="text" name="kp1_description" value="Enter Keypress Description">

Answer 1

$(document).ready(function(){
    var Input = $('input[name=kp1_description]');
    var default_value = Input.val();

    Input.focus(function() {
        if(Input.val() == default_value) Input.val("");
    }).blur(function(){
        if(Input.val().length == 0) Input.val(default_value);
    });
})?

应该这样做.

更新,忘记焦点没有焦点输出事件的第二个参数,因为没有,它必须与模糊链接:

http://jsfiddle.net/hDCsZ/

你还应该考虑为此创建自己的函数,例如:

$.fn.ToggleInputValue = function(){
    return $(this).each(function(){
        var Input = $(this);
        var default_value = Input.val();

        Input.focus(function() {
           if(Input.val() == default_value) Input.val("");
        }).blur(function(){
            if(Input.val().length == 0) Input.val(default_value);
        });
    });
}

然后像这样使用

$(document).ready(function(){
    $('input').ToggleInputValue();
})?

Answer 2

不要这样做.使用jQuery水印脚本:http: //code.google.com/p/jquery-watermark/

$("input[name='kp1_description']").watermark("Enter Keypress Description");

如果您手动执行此操作,则必须考虑很多事项.例如,当文本框失去焦点时会发生什么？如果没有价值,您需要阅读帮助文本.如果有,你想要兑现这些变化.

只是更容易让其他人做繁重的工作:)

Answer 3

使用HTML5,您可以在没有Javascript的情况下完成:只需使用placeholder而不是value.我认为这是一个很好的补充,但当然你需要先检查浏览器的兼容性.