Question

我有一个简单的表单，其中包含三个输入文本，每个文本都有不同的值。我希望当我点击其中一个来清除聋人的价值时，如果用户没有插入文本我出去将默认文本放入输入中。我在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>

Answer 1

您可以使用输入的占位符属性

在没有javascript的情况下实现此目的

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

查找示例here

编辑：

考虑到这是html5，虽然it's quite widely supported by browsers，如果你想全部支持它们，你应该遵循@liam的方法。

Answer 2

每次绑定焦点和模糊事件时，您的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);
            }
        });
    });
});

Answer 3

的 The working demo 的

$(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); } }); }); });

使用jQuery将默认文本更改为输入文本

3 个答案: