Question

我使用此代码创建一个字段

<tr><td> <input type="text" value="good"  onfocus="if (this.value == 'good') {this.value=''}" onblur="if(this.value == '') { this.value='good'}" name="name" maxlength="254" class="required" /></td></tr>

当用户点击字段时，我们有清空字段。如果用户将字段设为空，我们会回写此good值。但这不是我想要的，我正在寻找用户注册表单等方式在Facebook然后如果用户键入一个字符我们清除值，如果用户保持字段为空，我们将使用默认值填写此字段。有人帮助我使用此javascript或jquery？

Answer 1

您可以使用placeholder属性

<tr>
    <td>
        <input type="text" placeholder="good" name="name" maxlength="254" class="required" />
    </td>
</tr>

只要用户没有输入文字，就会显示，但不会更改value属性。

JSFiddle进行测试。

Answer 2

尝试将输入更改为：

<tr>
    <td>
        <input type="text" value="good" placeholder="good" name="name" maxlength="254" class="required defaultText" />
    </td>
</tr>

并添加一些jQuery代码：

$(document).ready(function() {
    $(".defaultText").focus(function(srcc) {
        if ($(this).val() == $(this)[0].placeholder) {
            $(this).val("");
        }
    });

    $(".defaultText").blur(function() {
        if ($(this).val() == "") {
            $(this).val($(this)[0].placeholder);
        }
    });

    $(".defaultText").blur();        
});

defaultText样式类用于选择html元素，元素中的placeholder正在定义它的默认值。

修改：为title更改了placeholder，这样就可以与html5或之前的

兼容

Example from here.

Answer 3

如果占位符属性不可行，则可以使用onkeydown事件而不是onfocus。

如何在用户在字段中键入内容时更新字段

3 个答案: