javascript - 如果值未更改，如何在不需要的输入字段中提交时删除默认值？

Question

默认情况下，我有一个输入字段的值，它告诉用户在那里放什么（例如输入您的帐号）。我有一个脚本，当您单击它时隐藏该值，当您单击离开时它会重新出现。

但该字段不是必需的。如果用户未在字段中输入信息，则会发送默认值并导致错误，因为它只允许数字。如果用户不填写他的帐号，如何将这个默认值更改为空？

Answer 1

不要使用默认值。使用占位符。

<input type="text" placeholder="Real Name">

适用于所有体面的浏览器。

---

或者，在服务器端忽略这些值：

if ($_POST["realname"] == "Real Name") { real_name_not_provided(); }

---

如果你仍然坚持使用 JavaScript（为了更好的浏览器支持），你可以使用类似下面的东西：

 $(function() {
    if(!$.support.placeholder) { 
        var active = document.activeElement;
        $(':text').focus(function () {
            if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
                $(this).val('').removeClass('hasPlaceholder');
            }
        }).blur(function () {
            if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
                $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
            }
        });
        $(':text').blur();
        $(active).focus();
        $('form').submit(function () {
            $(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
        });
    }
});

摘自这篇文章（顺便说一下，这是谷歌上的第一篇文章）。请在使用此代码之前阅读文章。它可能需要文章中的更多代码。

Answer 2

您应该在支持它的浏览器上使用 HTML5占位符属性。

真正的答案是为什么验证代码不够聪明，无法忽略默认文本？

Answer 3

您可以在表单发布之前验证您的输入，如下所示：

标记：

<input type="text" id="txtAcc" name="txtAcc" value="Enter your account number..." />
<input type="button" id="btnSubmit" name="btnSubmit" onclick="validate();" value="Submit" />

Javascript：

// Validate input before form post
function validate(){
    var txtAcc = document.getElementById("txtAcc");
    var accNum = parseInt(txtAcc.value);
    if (!accNum || txtAcc.value == "Enter your account number..."){
        // Set default Account number
        txtAcc.value = 0;
    }
}