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

Question

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

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 функции, но это не работает. Как мне это сделать?

Answer 1

Применение

element.onfocus = clear_input; 

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

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

с

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

"JavaScript:" бит не является необходимым.

Answer 2

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

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

Answer 3

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

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-statement к событию 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;} 
} 

Answer 4

<!-- 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>