Вставьте значение по умолчанию, если входной текст удален - PullRequest
Новая
       17

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

3 голосов
/ 07 июня 2010

У меня есть следующий фрагмент кода 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" />

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

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

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

Ответы [ 2 ]

1 голос
/ 07 июня 2010

Вы назначаете атрибут 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());

Проблема в том, что вы входите в этот блок, даже если текущее значение ввода пустое (""). Когда это происходит, вы обновляете значение по умолчанию, чтобы оно было пустым. Попробуйте прокомментировать это назначение или, может быть, просто избавиться от этого крайнего оператора 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');
    });

Примечание:: фокус не сработает для IE <8, и я думаю, что IE6 трудно понять, что делать с более чем одним классом. Так что, если вы пытаетесь сохранить дружескую поддержку IE6, добавляя и удаляя цвет CSS прямо в вашем коде. </p>

0 голосов
/ 07 июня 2010

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

$('#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 });
}
...