jquery - 使用 jQuery 的类似 Twitter 的输入字段

Question

我正在尝试制作一些我想像 Twitter 的注册表单一样工作的输入字段。

1. 在焦点上，值文本变为浅灰色。
2. 当您开始键入时，浅灰色默认值完全消失，用户编写的文本变为 #000000。
3. 如果您不写任何内容并且失去焦点，则默认文本会再次出现。

如何用jQuery实现？

Answer 1

这是执行此操作的示例方法，将输入的值设置为您想要它说的内容，并在附近有一个标签（您可以隐藏它，但将它放在 dom 中）以便您可以获取它的值并添加/去掉它。

// clear input on focus
    $('input.myclass').focus(function() {
        var inputlabel = $(this).attr('label');
        if($(this).val() == inputlabel) { $(this).val('').removeClass('inactive'); }
    });
    // restore text on blur if blank
    $('input.myclass').blur(function() {
        var inputlabel = $(this).attr('label');
        if($(this).val() == '') { $(this).val(inputlabel).addClass('inactive'); }
    });

您也可以placeholder在输入 ex 上使用 HTML5 <input placeholder='Your name' type='text' />，默认情况下它会清除焦点上的文本，但它不会像您期望的那样在所有浏览器上工作。

Answer 2

看看这个样本。

如何为文本输入元素指定一些水印文本？