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

Question

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

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

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

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

Answer 1

Вы назначаете атрибут 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 прямо в коде.

Answer 2

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

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