jQuery onfocus решает проблему размытия

У меня возникли проблемы с корректной работой событий onFocus и onBlur

Вот что я получил

var var1

$("input").focus(function() {

  var1 = $(this).val()

if ( $(this).val()==var1) {
       $(this).val('').css({'color': "#000", 'font-style': 'normal', 'font-weight': 'bold'});
   }  
    $(this).css({'background-color':'#d7df23' });    
});

$("input").blur(function() {
   if ( $(this).attr("value")=="") {
       $(this).val(var1).css({'color': "#666", 'font-style': 'italic', 'font-weight': 'normal'});
   }   
    $(this).css({'background-color':'#EEEEEE' });      
});

А вот мой HTML

<input type="text" id="tbTitle" value="Title">

<input type="text" id="tbTitle1" value="Title1">

<input type="text" id="tbTitle2" value="Title2">

Это работает, если вы не измените значение текстового поля.

В основном я хочу получить исходное значение ввода и сохранить его в var, а затем, если поле пустое, вернуть исходное значение.

На данный момент он ставит значение того, что находится в текстовом поле, в фокусе.

Есть ли способ сохранить исходное значение и изменить его только на этот onBlur?

Вот ссылка на мой jsfiddle


jquery onblur onfocus
person Jamie Taylor    schedule 28.01.2011    source источник
comment
Вы хотите сохранить значение поля ввода по умолчанию в var1 или как? Почему вам не нравится помещать в фокус-момент-значение?   -  person ikostia    schedule 28.01.2011
comment
Если я изменю значение на Test, а затем снова щелкну поле, оно удалит Test, а затем вернет его, если оно пустое, но я хочу вернуть исходное значение, т.е. Title   -  person Jamie Taylor    schedule 28.01.2011

Ответы (5)


arrow_upward
5
arrow_downward

Вот мое решение...

http://jsfiddle.net/Sohnee/YTTD5/4/

Или в коде...

var originalValues = new Array();

$("input").focus(function() {

    if (!originalValues[this.id]) {
      originalValues[this.id] = $(this).val()
    }

    if ( $(this).val()==originalValues[this.id]) {
           $(this).val('').css({'color': "#000", 'font-style': 'normal', 'font-weight': 'bold'});
       }  
        $(this).css({'background-color':'#d7df23' });    
   });

    $("input").blur(function() {
       if ( $(this).attr("value")=="") {
           $(this).val(originalValues[this.id]).css({'color': "#666", 'font-style': 'italic', 'font-weight': 'normal'});
       }   
        $(this).css({'background-color':'#EEEEEE' });      
   });
person Fenton    schedule 28.01.2011
comment
Относительно var originalValues = Array();: 1. Это ... = new Array();, или, если хотите быть более кратким, `=[];`. 2. Зачем использовать массив, если вы не индексируете его с помощью чисел или не используете какой-либо другой аспект его массивности? Просто используйте объект. - person T.J. Crowder; 28.01.2011
comment
@Т.Дж. Crowder - Спасибо, что заметили мою опечатку, я ее исправил. Вы можете хранить значения по своему усмотрению - предложение объекта действительно. - person Fenton; 28.01.2011
comment
Я хочу сказать, что это то, что вы делаете, используя объект. Тот факт, что рассматриваемый объект является массивом, совершенно не используется в вашем коде — вы не используете числовые индексы, свойство length или любую из функций Array.prototype. Вы также можете сказать new Date(). Но да, как вы говорите, полностью зависит от автора. - person T.J. Crowder; 28.01.2011

arrow_upward
0
arrow_downward

попробуйте установить var var1 = null; изначально, затем, когда срабатывает фокус, просто установите его в самый первый раз, например var1 = var1 ?? $(this).val();, похоже, что вы продолжаете переопределять значение каждый раз, также может потребоваться сохранить исходное значение как данные о фактическом объекте вместо глобальной переменной

person Kris Ivanov    schedule 28.01.2011
comment
опять же, это будет работать только для одного текстового поля, у вас их 3, рассмотрите возможность использования атрибута данных для каждого объекта DOM. - person Kris Ivanov; 28.01.2011

arrow_upward
0
arrow_downward

Вы используете один var1, но несколько текстовых полей. Таким образом, var1 будет забит вашим вводом в другое текстовое поле, когда вы покинете текстовое поле. Кроме того, вы присваиваете var1 до того, как проверите значение элемента на нем, поэтому == всегда будет истинным.

Чтобы «получить исходное значение ввода и сохранить его в var, а затем, если поле пустое, вернуть исходное значение», вы можете сделать что-то вроде этого:

var values = {};

$("input").focus(function() {

    var $this = $(this);

    // Save the value on focus
    values[this.id] = $this.val();

}).blur(function() {

    var $this = $(this);

    // Restore it on blur
    if ($this.val() == "") {
        $this.val(values[this.id]);
    }

});

Я не упомянул вышеприведенный материал CSS, потому что мне было не совсем понятно, что вы хотите с ним делать. Достаточно легко добавить обратно.

person T.J. Crowder    schedule 28.01.2011

arrow_upward
0
arrow_downward

без материала CS ... если мы введем поле, которое имеет значение, обратно это значение в атрибуте «rel». при выходе из поля, если значение пусто, скопируйте все, что может быть в атрибуте rel, что либо ничего, либо значение, которое присутствовало в начальном фокусе.

$("input").focus(function() {
 if($(this).val()!=''){
  $(this).attr('rel',$(this).val());
 }
});

$("input").blur(function() {
 if($(this).val()==''){
  $(this).val($(this).attr('rel'));
 }
});
person FatherStorm    schedule 28.01.2011

arrow_upward
0
arrow_downward

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

var initials ={};
$(document).ready(function(){
  $('input').each(function(){
    initials[this.id] = $(this).attr('value');
  });
});

$('input').focus(function(){
  // do whatever you want to
});

$('input').blur(function(){
  if($(this).attr('value')==''){
    $(this).attr('value', initials[this.id]);
  }
  // do other stuff
});
person ikostia    schedule 28.01.2011