Изменить обработчик onfocus элемента с помощью Javascript?

У меня есть форма со значениями по умолчанию, описывающими, что должно быть в поле (заменяя метку). Когда пользователь фокусирует поле, эта функция вызывается:

function clear_input(element)
{
    element.value = "";
    element.onfocus = null;
}

Для onfocus установлено значение null, поэтому, если пользователь помещает что-то в поле и решает его изменить, его ввод не стирается (поэтому он стирается только один раз). Теперь, если пользователь переходит к следующему полю, не вводя никаких данных, значение по умолчанию восстанавливается с помощью этой функции (называемой onblur):

function restore_default(element)
{
    if (element.value == '')
    {
        element.value = element.name.substring(0, 1).toUpperCase()
                          + element.name.substring(1, element.name.length);
    }
}

Так уж получилось, что значениями по умолчанию были имена элементов, поэтому вместо добавления идентификатора я просто манипулировал свойством name. Проблема в том, что если они пропускают элемент, событие onfocus аннулируется с помощью clear_input, но никогда не восстанавливается.

я добавил

element.onfocus = "javascript:clear_input(this);";

В функции restore_default, но это не работает. Как мне это сделать?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
4
0
20 757
4

Ответы 4

Использовать

element.onfocus = clear_input;

или (с параметрами)

element.onfocus = function () { 
    clear_input( param, param2 ); 
};

с

function clear_input () {
    this.value = "";
    this.onfocus = null;
}

Бит «javascript:» не нужен.

Пример с параметрами был именно тем, что мне было нужно, я бы никогда не догадался о таком синтаксисе.

eselk 28.11.2012 21:32

Я бы посоветовал вам поступить иначе. Вместо того, чтобы очищать значение, почему бы просто не выделить его все, чтобы пользователь мог просто начать печатать, чтобы перезаписать его. Тогда вам не нужно восстанавливать значение по умолчанию (хотя вы все равно можете сделать это и таким же образом, если значение пусто). Вы также можете оставить обработчик на месте, поскольку текст не очищается, а просто выделяется. Используйте проверку, чтобы убедиться, что значение не является исходным значением ввода.

function hightlight_input(element) {
    element.select();
}

function restore_default(element) // optional, do we restore if the user deletes?
{
    if (element.value == '')
    {
        element.value = element.name.substring(0, 1).toUpperCase()
                          + element.name.substring(1, element.name.length);
    }
}

Похоже, вы не разрешаете полям быть пустыми, но что, если пользователь помещает одно или несколько пробелов в поле? Если вы хотите предотвратить это, вам нужно подрезать его. (См. Блог Стивена Левитанса для различных способов обрезки).

function trim(str) {
    return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
}

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

function capitalize(str) {
    return str.substr(0, 1).toUpperCase() + str.substr(1).toLowerCase();
}

Очистив событие onfocus, вы создали проблему, которой не должно быть. Более простое решение - просто добавить оператор if к событию onfocus, чтобы оно очищалось только в том случае, если это ваше значение по умолчанию (но я предпочитаю выбирать его, как предложил tvanfosson).

Я предполагаю, что вы в своих элементах ввода установили свойство value, чтобы значение отображалось в элементах ввода, когда страница отображается, даже если javascript отключен. Это значение доступно как element.defaultValue. Бонусы при использовании этого подхода:

  • Вы определяете значение по умолчанию только в одном месте.
  • Вам больше не нужно использовать какие-либо значения в ваших обработчиках.
  • Значение по умолчанию может иметь любой регистр (например, "John Y McMain").
  • Значение по умолчанию больше не должно совпадать с именем элемента.

.

function clear_default(element) {
    if (trim(element.value) == element.defaultValue ) { element.value = ""; }
}

function restore_default(element) {
    if (!trim(element.value).length) { element.value = element.defaultValue;}
}
<!-- JavaScript
function checkClear(A,B){if (arguments[2]){A=arguments[1];B=arguments[2]} if (A.value==B){A.value = ""} else if (A.value= = ""){A.value = "Search"}}
//-->

<form method = "post" action = "search.php">
<input type = "submit" name = "1">
<input type = "text" name = "srh" Value = "Search" onfocus = "checkClear(this,'Search')" onblur = "checkClear(this,' ')">
</form>

Другие вопросы по теме