使用 jquery 的高级重置表单答案

【问题标题】：Advanced resetting forms with jquery使用 jquery 的高级重置表单
【发布时间】：2012-08-14 19:15:09
【问题描述】：

当您尝试注册并将某些内容保留为空白/未填写时，您会收到错误消息。（来自 PHP）。已填写内容的输入字段会被记住（Smarty：{if isset($smarty.post.registratie.naam)} value="{$smarty.post.registratie.naam}"{else}value="Naam:"{/if}）

问题：在尝试注册失败后，我的输入字段的默认值最初是“Naam：”，“Voornaam：”，“Email：”已更改为用户输入的值。（对于例如“弗雷德里克”）

示例：http://www.pixsters.be/index.php?page=registratie

使用我的 Jquery 代码，我清除了存在默认值的字段，尽管我不想清除用户填写的字段。

jQuery 代码：

function clearField(e)
{
    if($(this).val() == this.defaultValue)
    {
        $(this).val('');
    }

}

function resetField(e)
{
    if($(this).val() == '')
    {
        this.value = this.defaultValue;
    }
}

【问题讨论】：

您能否详细说明当前代码有什么问题？除此之外，对于现代浏览器，您可以只使用 <input placeholder="Naam:">。
好吧，如果你想在前一个字段中重新输入一些东西（在第一次提交之后）（如果你写错了你的名字或其他东西），那么这个值就会消失。然后记住值以在以后编辑它的全部意义就消失了。

标签： javascript jquery forms field reset

【解决方案1】：

问题是当新页面加载时，输入的值变成了defaultValues。相反，您可以使用placeholder 属性（还有一些适用于旧浏览器的插件）：

<input placeholder="Naam:" ...>

在没有任何 JavaScript 的情况下键入内容时，这将自动消失，并且不会受到您的问题的影响。

不过，您可能希望保持黑色：

/* add other prefixes if necessary */
input::-webkit-input-placeholder { color: black; }

【讨论】：

【解决方案2】：

我认为隐藏字段标题是一个糟糕的界面设计理念。在某些时候，用户将无法分辨某些字段的用途。考虑改变设计。

如果您仍然想坚持使用它，只需在输入字段中添加默认值，例如：

<form id="my-form">
    <input type="text" data-default-value="Enter your name:" name="name" value="{$form.name}">
</form>

$(document).ready(function() {
    // Iterating through all form elements.
    $.each('#my-form input[type="text"]', function() {
        // Adding event listener and calling it afterwards to fill the inputs initially.
        $(this).change(function() {
            var $Input = $(this);
            // If element value is not set (empty), then using default value.
            if ($Input.val() == '') {
                $Input.val($Input.attr('data-default-value'));
            }
        }).change();

    });
});

【讨论】：