输入字段中的默认文本

Question

我不知道它是否有一个特殊的名称,但有一个很简单的方法来设置输入字段中的默认文本,如果文本框为空,它会在焦点上消失并重新出现在模糊上？

Answer 1

您可以使用新的HTML5占位符属性.

编辑:更新以使用更多HTML5/jQuery热度,HTML5数据存储.

<input type="text" placeholder="type here" data-placeholder-text="type here" />

这适用于所有现代浏览器.在IE中优雅地降级.但是对于IE,你必须使用javascript.

$(document).ready(function() {

    var $input = $('#id_of_input_element');
    $input.focus(function() {
        if($(this).val() == $(this).data('placeholder-text')) { 
            $(this).val('') 
        }
    }).blur(function() {
        if($(this).val() == '') {
            $(this).val($(this).data('placeholder-text'));
        }
    }).trigger('blur');
}):

Answer 2

这个词是水印

1. http://plugins.jquery.com/project/Watermark
2. http://digitalbush.com/projects/watermark-input-plugin/
3. http://cysemic.com/2008/12/very-simple-textbox-watermark-using-jquery/

我鼓励使用插件，除非您有足够的时间进行开发和测试。编写此代码时需要注意许多问题和副作用。

• 当字段包含水印文本时，将其验证为“空”。从而区分水印文本和输入文本。
• 不提交水印文本。
• 防止用户输入水印文本本身:)
• 设置水印文本的样式。
• 等等，等等......