Javascript: с программным изменением функции onfocus

У меня есть несколько текстовых полей, которые могут автоматически заполняться данными, и я использую функцию javascript, чтобы очистить текстовое поле один раз, а затем вернуться к функции javascript, которая очищается только при вводе определенного текста ,Javascript: с программным изменением функции onfocus

Например: текстовое поле со стандартным вводом как «АДРЕС» будет автоматически заполнено «ABC123», а затем очищено. Если текстовое поле остается пустым, тогда он будет возвращен в «АДРЕС»

Это похоже на вопрос на Change an element's onfocus handler with Javascript?, но я не мог заставить его работать. Какие-либо предложения?

Мои текстовые поля просто ASP.NET текстовые поля и OnFocus/ONBLUR события устанавливаются в коде позади:

<asp:TextBox ID="txtAddress" Text="ADDRESS" runat="server" CssClass="txtboxwrong" />

Код За:

txtAddress.Attributes.Add("onFocus", "clearOnce(this,'ADDRESS');") 
txtAddress.Attributes.Add("onBlur", "restoreText(this,'ADDRESS');")

Мой Javascript выглядит следующим образом:

function clearText(obj, deftext, defclass, defvalue) { 
    if (obj.value == deftext) { 
     if (!defvalue) { defvalue = '' } 
     obj.value = defvalue; 
     if (!defclass) { defclass = 'txtbox' } 
     obj.className = defclass; 
    } 
}; 

function restoreText(obj, deftext, defclass, defvalue) { 
    if (!defvalue) { defvalue = '' } 
    if (obj.value == defvalue || obj.value == '') { 
     obj.value = deftext; 
     if (!defclass) { defclass = 'txtboxwrong' } 
     obj.className = defclass; 
    } 
}; 

function clearOnce(obj, deftext) { 
    obj.value = ''; 
    obj.className = 'txtbox'; 
    obj.onfocus = function() { clearText(obj, deftext); }; 
};

EDIT:

Благодаря @rescuecreative, я исправил пробную версию. Возвращая изменение onfocus в clearOnce, он устанавливает onfocus элемента в правильную функцию и работает правильно! Изменить ниже:

function clearOnce(obj, deftext) { 
obj.value = ''; 
obj.className = 'txtbox'; 
return function() { clearText(obj, deftext); };

};

источник

2013-10-02 JacobD

Может ли ваш текстовый файл asp использовать атрибут placeholder? В html5 атрибут placeholder автоматически создает точную функциональность, которую вы ищете.

<input type="text" placeholder="ADDRESS" />

выше текстовое поле будет показывать слово «ADDRESS» до тех пор, фокусируются в этот момент он будет выплескивать и позволить пользователю вводить. Если пользователь покидает поле и остается пустым, снова появляется местозаполнитель. Если вы не можете зависеть от html5, есть JavaScript plugin, который создаст эту функциональность в браузерах, которые ее не поддерживают.

источник

2013-10-02 18:46:12 rescuecreative

Я сейчас поиграю с ним, но есть ли быстрое исправление для кода, который я уже написал? – JacobD

@JUSTAGuyIKnow Конечно. Я не парень ASP, но мне кажется, что ваша функция clearOnce вызывается каждый раз, когда поле фокусируется. Это означает, что все, что он делает, сбрасывает свойство onfocus элемента каждый раз, когда оно вызывается. Фактически, перезаписывая свойство onfocus элемента, вы, вероятно, уничтожаете способность ASP взаимодействовать с событием фокуса.Поэтому вместо изменения свойства onfocus в конце clearOnce попробуйте ВОЗВРАТИТЬ функцию, которая вызывает clearText. – rescuecreative

ОН МОЙ ГЛОБ ЭТО РАБОТАЕТ! Спасибо @rescuecreative! Я отправлю ответ и объясню его с вашей помощью. – JacobD

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

function clearOnce(obj, deftext) { 
    if(obj.value == deftext) { 
     obj.value = ''; 
     obj.className = 'txtbox'; 
    } 
} 

function restoreText(obj, deftext) { 
    if(obj.value == '') { 
     obj.value = deftext; 
     obj.className = 'txtboxwrong'; 
    } 
}

источник

2013-10-02 18:57:20

Это сотрет любой вход, как только вы сосредоточитесь на нем, не так ли? У меня это было какое-то время, но пользователи раздражали его. Я хочу, чтобы он мог обнаружить определенную строку, которая запускает текст для очистки. – JacobD

В идеале вы бы просто использовать атрибут placeholder, но это может не поддерживаться на старых браузерах. Если вы можете использовать JQuery, что-то, как это будет работать для вас:

$('[placeholder]').focus(function() { 
    var input = $(this); 
    if (input.val() == input.attr('placeholder')) { 
     input.val(''); 
     input.removeClass('placeholder'); 
    } 
}).blur(function() { 
    var input = $(this); 
    if (input.val() == '' || input.val() == input.attr('placeholder')) { 
     input.addClass('placeholder'); 
     input.val(input.attr('placeholder')); 
    } 
}).blur();

Если никогда ничего не вводится в поле, ниже код обеспечит текст-заполнитель не получает связано с формой:

$('[placeholder]').parents('form').submit(function() { 
    $(this).find('[placeholder]').each(function() { 
     var input = $(this); 
     if (input.val() == input.attr('placeholder')) { 
      input.val(''); 
     } 
    }) 
});

источник

2013-10-02 19:13:59

Javascript: с программным изменением функции onfocus

ответ

Смежные вопросы