Предотвращение сохранения "заполнителя"

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 ... посмотрите один из них и рассмотрите возможность его использования или посмотрите, как они обрабатывают отправку форм и делают заметки. Вот один из многих .

---

Редактировать Есть несколько других проблем в вашем скрипте, он вызывает ошибки 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 сделать то же самое, что делает код jQuery OP:

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/