Изменить обработчик onfocus элемента с помощью Javascript? - PullRequest
Новая
       22

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

3 голосов
/ 15 ноября 2008

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

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

Onfocus установлен в ноль, так что если пользователь помещает что-то в поле и решает изменить его, его ввод не стирается (поэтому он стирается только один раз). Теперь, если пользователь переходит к следующему полю без ввода каких-либо данных, значение по умолчанию восстанавливается с помощью этой функции (называемой 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, но это не работает. Как мне это сделать?

Ответы [ 4 ]

7 голосов
/ 15 ноября 2008

Используйте 

element.onfocus = clear_input;

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

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

с 

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

Бит "javascript:" не нужен.

1 голос
/ 15 ноября 2008

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

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;}
}
0 голосов
/ 19 ноября 2009 
<!-- 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>
0 голосов
/ 15 ноября 2008

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

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);
    }
}
...