1

我有一个简单的表单，其中包含三个输入文本，每个文本具有不同的值。我希望当我单击一个以清除默认值时，如果用户不插入文本，我想在外出时将默认文本放入输入中。我在 jQuery 中编写了一个代码，问题是当我点击它时，它采用第一个输入类型的相同默认值，而不是它的文本，为什么？这是代码：

<script type="text/javascript">
$(document).ready(function() {
    $('.testo').each(function() {
    var default_value = this.value;
        $(".testo").focus(function() {
            $(this).attr('value','');
        });
        $(".testo").blur(function() {
            if ($(this).attr('value')==''){
                $(this).attr('value',default_value);
            }
        });
    });
});

<p><input type="text" name="nome" class="testo"  value="Nome e Cognome"/> </p>
            <p><input type="text" name="telefono" class="testo" value="un tuo Recapito Telefonico"/></p>
            <p><input type="text" name="email"  class="testo" maxlength="60" value="una E-Mail Valida"/></p>

4

3 回答 3

5

您可以使用输入的占位符属性在没有 javascript 的情况下实现此目的：

<input type="text" name="telefono" class="testo" placeholder="un tuo Recapito Telefonico"/>

在此处查找示例

编辑：

考虑到这是 html5，虽然它被浏览器广泛支持，但如果你想支持它们，你应该遵循@liam 的方法。

于 2012-07-30T10:52:53.127 回答
1

每次绑定焦点和模糊事件时，您的 javascript 都没有使用相同的值。所以这些将始终绑定到每个中的最后一个，请尝试：

$(document).ready(function() {
    $('.testo').each(function() {
    var default_value = this.value;
        $(this).focus(function() {
            $(this).val('');
        });
        $(this).blur(function() {
            if ($(this).val()==''){
                $(this).val(default_value);
            }
        });
    });
});
于 2012-07-30T10:50:32.890 回答
0

工作演示。

$(document).ready(function() {
    $('.testo').each(function() {
        var default_value = this.value;
        // you could do chain method to avoid call $(this) twice.
        $(this).focus(function() {
            $(this).val('');
        }).blur(function() {
            if ($(this).val() == ''){
                $(this).val(default_value);
            }
        });
    });
});​
于 2012-07-30T10:56:43.143 回答