javascript - 阻止保存 "placeholder"

Question

我有一个简单的 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() 因为我不知道可能会出现什么问题，除了在我清除名称之前发送表单之外。我认为它可以解决问题，但不知怎的，默认值仍然被保存。

Answer 1

注意: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('');

此外，已经有几个适用于 jQuery 的占位符 shim 脚本...查看一个并考虑使用它，或者看看它们如何处理表单发布并记下。 Here's one of many .

<小时/>

编辑您的脚本中还有一些其他问题，它导致 JavaScript 错误并且无法完成。如果您使用 Firebug 进行调试，请尝试在处理表单时打开控制台中的“持久”选项，以保留请求之间的错误。

问题是，您在检查元素是否具有占位符文本之前先检查占位符文本。请参阅下面的修复程序。

$('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/