Вставить значение по умолчанию, если ввод-текст удален

У меня есть следующий фрагмент кода jQuery:

$(".SearchForm input:text").each(function(){        
    /* Sets the current value as the defaultvalue attribute */
    if(allowedDefaults.indexOf($(this).val()) > 0 || $(this).val() == "")
    {
        $(this).attr("defaultvalue", $(this).val());
        $(this).css("color","#9d9d9d");


        /* Onfocus, if default value clear the field */
        $(this).focus(function(){               
            if($(this).val() == $(this).attr("defaultvalue"))
            {
                $(this).val("");
                $(this).css("color","#4c4c4c");
            }
        });

        /* Onblur, if empty, insert defaultvalue */
        $(this).blur(function(){
            alert("ud");

            if($(this).val() == "")
            {   
                $(this).val($(this).attr("defaultvalue"));                  
                $(this).css("color","#9d9d9d");
            }else
            {
                $(this).removeClass("ignore");

            }   
        }); 

    }

});

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

Когда пользователь сначала видит поле ввода, оно выглядит так:

<input type="text" value="" defaultvalue="From" />

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

Когда форма отправляется, ввод выглядит следующим образом и продолжает выглядеть так до тех пор, пока форма не будет отправлена ​​снова:

<input type="text" value="someValue" defaultvalue="From" />

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

Все ли понимают, в чем моя проблема? В противном случае просто спросите, я уже несколько раз боролся с этим, поэтому любая помощь будет принята с благодарностью.

Заранее спасибо, Ким Андерсен


input jquery default-value
person Kim Andersen    schedule 07.06.2010    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы присваиваете атрибут defaultvalue любому текущему значению в строках 3-5 вашего кода. Комментарий к строке 2 даже говорит вам, что вы делаете.

/* Sets the current value as the defaultvalue attribute */
if(allowedDefaults.indexOf($(this).val()) > 0 || $(this).val() == "")
{
    $(this).attr("defaultvalue", $(this).val());

Проблема в том, что вы входите в этот блок, даже если текущее значение ввода пусто (""). Когда это происходит, вы обновляете defaultValue до пустого. Попробуйте закомментировать это назначение или, может быть, даже просто избавиться от этого самого внешнего оператора if. Я бы также предложил использовать класс для изменения цвета текста для сфокусированного поля ввода. Или просто используйте псевдокласс :focus в вашем css.

// in your css
.SearchForm input { color: #9d9d9d; }
.SearchForm input.focused,
.SearchForm input:focus { #4c4c4c; }


$(".SearchForm input:text")
    //.unbind('focus').unbind('blur') // uncomment if playing in the console
    .focus(function () {
        var $this = $(this);
        if ($this.val() == $this.attr("defaultvalue")) 
        {
            $this.val("")
                 //.addClass('focused');
        }
    })
    .blur(function () {
        var $this = $(this);
        if ($this.val().trim() == "") 
        {
            $this.val($this.attr("defaultvalue"));
        }
        //$this.removeClass('focused');
    });

Примечание: :focus не будет работать для IE ‹ 8, и я думаю, что IE6 трудно понять, что делать с более чем одним классом. Поэтому, если вы пытаетесь оставаться дружественным к IE6, добавляйте и удаляйте цвет css непосредственно в коде.

person istruble    schedule 07.06.2010

arrow_upward
0
arrow_downward

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

$('#nav-search-box').addClass("idleField").focus(function() {
$(this).removeClass("idleField").addClass("focusField");
if (this.value == this.defaultValue) {
this.value = '';
}
if (this.value != this.defaultValue) {
this.select();
}
}).blur(function() {
$(this).removeClass("focusField").addClass("idleField");
if ($.trim(this.value) == '') {
this.value = (this.defaultValue ? this.defaultValue : '');
}
}).keypress(function(e) {
if (e.which == 13) {
window.location = "/search/" + $(this).val();
}
});

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

function disableFormPost()
{
    $("#formid").submit(function() { return false });
}
person jjr2527    schedule 07.06.2010