Как повторно использовать функцию JavaScript для управления вводом формы?

Question

У меня есть поле ввода, которое работает точно так, как я хочу, однако у меня есть многочисленные поля, повторяющие этот же код. Можно ли вызвать функцию JavaScript и получить те же результаты?

Вот мой в настоящее время работает HTML:

<input type="text" name="lname" value="Last Name" style="color:gray;" 
onblur="if((this.value == 'Last Name') || (this.value == '')) 
{this.value = 'Last Name'; this.style.color= 'gray';} 
else {this.style.color= 'black';}" 
onfocus="if((this.value == 'Last Name') || (this.value == '')) 
{this.value = ''; this.style.color= 'gray';} 
else {this.style.color= 'black';}" 
onselect="this.style.color= 'black';" 
onclick="this.style.color= 'black';"/> 

Но я надеялся, чтобы быть в состоянии сделать что-то вроде этого:

<input type="text" name="lname" value="Last Name" style="color:gray;" 
onblur="onBlurAction()"; 
onfocus.... 
etc.... 
</input> 

<script> 
function onBlurAction() 
{ 
    if((this.value == 'Last Name') || (this.value == '')) 
     {this.value = 'Last Name'; this.style.color= 'gray';} 
    else {this.style.color= 'black';} 
} 
function onFocusAction.... 
etc.... 
</script> 

Answer 1

В функции, this относится к window глобальной переменной, вы должны пройти this в качестве аргумента:

onblur="onBlurAction(this)"

В то время как функция (ы) будет что-то вроде:

function onBlurAction(el) 
{ 
    if (el.value == 'Last Name' || el.value == '') { 
     el.value = 'Last Name'; 
     el.style.color = 'gray'; 
    } else { 
     el.style.color = 'black'; 
    } 
} 

Другой способ - не изменять функцию, но использовать onblur таким образом:

onblur="onBlurAction.call(this)"

Answer 2

Вы можете использовать функцию в качестве обработчика для более чем одного мероприятие.

<input type="text" name="lname" value="Last Name" style="color:gray;" 
    onblur="onBlurAction();" onfocus="onBlurAction();" .../> 

Это будет вызывать onBlurAction как для размытия и события фокуса. Вы можете сделать что-то подобное для onselect и onclick.

Answer 3

Не могли бы вы использовать placeholder attribute?

Edit:

Doing, как Томас Аптон упомянул не будет работать, потому что он использует .value атрибут. Как только пользователь введет что-то, значение изменится, поэтому функция не сможет правильно проверить значение (по умолчанию), потому что оно было изменено.

Вместо этого он мог бы использовать атрибут placeholder, чтобы помочь функции. Что-то вроде этого:

 <input type="text" name="lname" value="" placeholder="Last Name" style="color:gray;" 
       onblur="javascript:onBlurAction(this.name);" 
       onfocus="javascript:onBlurAction(this.name);" 
       onselect="javascript:onBlurAction(this.name);" 
       onclick="javascript:onBlurAction(this.name);"> 

       function onBlurAction(elname) 
       { 
        value = document.getElementById(elname).getAttribute("placeholder"); 
        if ((this.value == value) || (this.value == '')) 
        { 
         this.value = value; 
         this.style.color = 'gray'; 
        } 
        else { 
         this.style.color = 'black'; 
        } 
       } 

Он передает имя элемента функции, и эта функция получит значение-заполнитель. Это будет работать для всех его текстовых входов, повторно использующих функцию по своему усмотрению. тест здесь: http://fiddle.jshell.net/6qMj8/1/