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

我有一个简单的表单，有三个输入文本，每个文本的值不同。 我希望当我在1处单击inside以清除deafult值时，以及当我在用户未插入文本时将默认文本放入输入时。 我已经在jQuery中编写了一个代码，问题是当我单击out时，它会使用第一个输入类型的相同默认值，而不是它的文本。为什么？ 代码如下：

<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>

$（文档）.ready（函数（）{
$（'.testo'）。每个（函数（）{
var default_value=this.value；
$（“.testo”）.focus（函数（）{
$（this.attr（'value'，''）；
});
$（“.testo”）.blur（函数（）{
if（$（this.attr（'value'）=''）{
$（this.attr（'value'，默认值）；
}
});
});
});

---

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

---

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

---

您可以在不使用javascript的情况下，使用输入的占位符属性来实现这一点：

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

举例

编辑：

---

考虑到这是html5，但是，如果您想支持它们，您应该遵循@liam的方法。

您可以使用输入的占位符属性，在不使用javascript的情况下实现这一点：

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

举例

编辑：

要考虑到这是html5，尽管如果你想支持它们，你应该遵循@liam的方法。

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

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

---

使用默认文本验证输入的文本。使用默认文本验证输入的文本。

attr（'value'）

应为

.val（）

attr（'value'）

应为

.val（）

请记住，这是HTML5，因此您需要注意与旧浏览器的兼容性。请记住，这是HTML5，因此您需要注意与旧浏览器的兼容性。是我，还是您刚刚将我的代码剪切并粘贴到答案中？@Liam它只是重复的，我将删除此答案。无需复制您的代码：）@Liam哦，我想我应该留下答案，因为您的答案有两次

$（此）

。是我还是您刚刚将我的代码剪切并粘贴到答案中？@Liam它只是复制的，我将删除此答案。不需要复制你的代码：）@Liam哦，我想我应该留下答案，因为你的答案做了两次。