防止保存“占位符”

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的人来说，这是使用OP的jQuery代码做同样事情的简单javascript方式：

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/