Примеры полей ввода из тега title, с переключателем

Question

Я создаю форму, которая должна иметь примеры в полях ввода. Поэтому, когда вы нажимаете на них, пример отключается, и вы можете вставить свое собственное значение.

Также примеры должны быть в другом классе. И я думаю, что лучший способ загрузить примеры - из тега title. Потому что, когда я отправляю форму .. Я не хочу, чтобы примеры учитывались.

В настоящее время я использую этот плагин jQuery: http://jquery.kuzemchak.net/toggleval.php Это в основном работает, как и должно, но проблема с подтверждением. Чтобы очистить поля ввода при отправке, я сделал этот скрипт:

$(".formtable_submit").hover(function () {
    $(this).parents("form").find("input").each(function () {
        $(".toggleval:not(.toggleval_foc)").val("");
    });
});

Так что, если вы наведите курсор мыши на submit, он очистит все поля ввода с классом .toggleval, но не с полями, в которые вставлены пользовательские значения (класс .toggleval_foc).

Я мог бы также добавить к этому сценарию, что при наведении мыши он снова отобразит примеры ... Но это не лучшее решение. Лучше всего было бы отображать их из тега title и при отправке тег value был бы как есть.

Если бы вы могли указать мне сценарий или какую-то идею, это было бы замечательно. Я не смог найти ни одного такого скрипта, который бы работал.

Answer 1

Почему бы не связать событие отправки формы вместо наведения? Если вы делаете что-то вроде этого:

$('selector-for-your-form').submit(function() {
    $(this).find('input:not(.toggleval_foc)').val('');
    return true;
});

Затем вы удалите значения примера по умолчанию непосредственно перед отправкой формы. Вам, конечно, придется поставить реальный селектор вместо 'selector-for-your-form'.

Answer 2

То, что вы описываете, является функциональностью заполнителя, и ее не следует выполнять как полизаполнение, помещая какие-либо значения в реальные поля ввода, тем самым сводя на нет необходимость очищать инвалидов при отправке формы.

Я предлагаю переключиться на плагин, в котором уже есть этот материал, например, любой из плагинов на этой странице в разделе Web Forms: входная метка-заполнитель. Современные браузеры позволяют стилизовать местозаполнитель с помощью псевдоэлемента CSS: placeholder, и большинство из этих многогранников дают вам классифицируемый элемент для стилей старых браузеров.

Answer 3

Сначала поместите значения по умолчанию в поле, присвойте им класс стирания, затем попробуйте что-то вроде этого ...

$('.wipe').addClass('wipeDefault'); $('.wipe').focus(function() { 
if (this.value == this.defaultValue) { this.value = ''; 
$('.wipe').removeClass('wipeDefault');

$(this).removeClass('wipeDefault'); } }); 
$('.wipe').blur(function() { if (this.value == '') { 
this.value = this.defaultValue; 
$('.wipe').addClass('wipeDefault');

$(this).addClass('wipeDefault'); } });