防止保存“占位符”

Preventing from saving "placeholder"

本文关键字：占位符 保存      更新时间：2023-09-26

我有一个简单的HTML表单和输入:

<input placeholder="Default text" name="title" />

我有JS函数检查输入的值是否为空，如果是，它填充占位符的值(对于非Webkit浏览器)。现在我想防止保存占位符的值，所以我写了一个这样的函数:

$('form').each(function () {
    $(this).submit(function (event) {
        $(this).find('input').each(function () {
            var default_value = $(this).attr("placeholder").replace(/'r/g, "");
            if ($(this).attr("type") != "password" && $(this).attr("type") != "submit") {
                if (default_value == $(this).val()) {
                    $(this).attr("name", "");
                }
            }
        });
    });
});

基本上是从输入中删除"name"属性。我添加了preventDefault()，因为我不知道除了在我清除名称之前发送表单之外还有什么问题。我以为它会奏效，但不知何故，默认值仍然被保存。

注意:占位符支持Firefox 4+， Opera 11+， Chrome 3+和Safari 3+。Internet Explorer将在版本10中开始支持。因此，如果您正在编写一个脚本，请记住，您不必使用支持的用户代理。

如果该值等于默认值，您发布的代码将删除元素的name属性。我不认为这是你的意思…如果该值等于默认值，您不希望将其清空吗?

if (default_value == $(this).val())
    $(this).attr("name", "");
// should be...
if (default_value == $(this).val())
    $(this).val('');

此外，有几个占位符shim脚本已经围绕jQuery…检查一下并考虑使用它，或者看看他们如何处理表单张贴并做笔记。这是其中之一。

编辑还有一些其他的问题在你的脚本，它是导致javascript错误和不完成。如果您正在使用Firebug进行调试，请尝试在控制台中打开"Persist"选项，以便在处理表单时保留请求之间的错误。

问题是，在检查元素的类型是否甚至具有占位符文本之前，您正在检查占位符文本。

$('form').each(function () {
    $(this).submit(function (event) {
        $(this).find('input').each(function () {
            if ($(this).attr("type") != "password" && $(this).attr("type") != "submit") {
                var default_value = (
                    $(this).attr("placeholder") ?
                    $(this).attr("placeholder").replace(/'r/g, "") :
                    false
                );
                if (default_value && default_value == $(this).val()) {
                    $(this).attr("name", "");
                }
            }
        });
    });
});

jsFiddle: http://jsfiddle.net/a8DQS/

编辑2

对于那些不使用jQuery的人，这是简单的javascript方式来做同样的事情OP的jQuery代码:

var forms = document.getElementsByTagName('form');
var frm_ct = forms.length;
for (var x = 0; x < frm_ct; x++) {
    var handler = function (e) {
        var elements = this.elements;
        elmnt_ct = elements.length;
        for (var y=0; y < elmnt_ct; y++) {
            if (
                elements[y].tagName == 'INPUT' && (
                    elements[y].type != 'password' &&
                    elements[y].type != 'submit'
                )
            ) {
                var default_value = (
                    elements[y].placeholder ?
                    elements[y].placeholder.replace(/'r/g, "") :
                    false
                );
                if (default_value && default_value == elements[y].value)
                    elements[y].value = '';
            }
        }
    }
    if (forms[x].addEventListener)
        forms[x].addEventListener('submit', handler, false);
    else
        forms[x].attachEvent('onsubmit', handler);
}

jsFiddle: http://jsfiddle.net/nDLZJ/2/

相关文章：