Очистка полей ввода с помощью JavaScript

Question

Я рассматривал это в течение последних нескольких часов и не могу реально добиться того, что я ищу. Я в настоящее время имеют следующие два входа:

<input type="text" id="username" value="USERNAME" onfocus="inputFocused(this)" onblur="inputBlurred(this)" /> 
<input type="password" id="password" value="PASSWORD" onfocus="inputFocused(this)" onblur="inputBlurred(this)" /> 

Первоначально входы текста серого цвета, и у меня есть следующие JavaScript функции OnFocus и ONBLUR:

var defaultInput = ""; 

function inputFocused(obj){ 
    defaultInput = obj.value; 
    obj.value = ""; 
    obj.style.color = "#000"; 
} 

function inputBlurred(obj){ 
    if(obj.value == ""){ 
     obj.style.color = "#AAA"; 
     obj.value = defaultInput; 
    } 
} 

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

Answer 1

В поле inputFocused вы очищаете значение поля ввода независимо от состояния. Может быть, я неправильно понимаю ваше намерение, но почему бы вы не уклонились от этой ценности, когда сосредоточились на контроле?

Обновлено: Добавление атрибута «defaultTextValue» для каждого элемента позволяет захватывать значение по умолчанию на вход на первом случае фокусировки. Альтернативой является использование вашего документа onLoad для получения значений по умолчанию. Ниже сниппета очищает текстовые поля, когда они сфокусированы, и их значение совпадает с значениями по умолчанию, с которыми они были инициализированы. Вы могли бы раздражать пользователей, которые имеют либо имя пользователя «имя пользователя» или пароля «пароль», но вы, вероятно, следует в любом случае 8-)

function inputFocused(obj) { 

    if (obj.defaultTextValue == undefined || obj.value == obj.defaultTextValue) { 
     obj.defaultTextValue = obj.value; 
     obj.value = ""; 
    } 
} 

function inputBlurred(obj) { 

    if (obj.value == "" && obj.defaultTextValue != undefined) { 
     obj.value = obj.defaultTextValue; 
    } 
} 

Answer 2

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

Answer 3

Добавление кода jscharf, вы можете использовать атрибут заголовка входного для сохранения значения по умолчанию для каждого входа. Это имеет преимущество, удобство того, чтобы позволить людям знать, что поле ввода должно содержать, когда они парят над ним:

<input type="text" id="username" value="USERNAME" title="USERNAME" onfocus="inputFocused(this)" onblur="inputBlurred(this)" /> 
<input type="password" id="password" value="PASSWORD" title="PASSWORD" onfocus="inputFocused(this)" onblur="inputBlurred(this)" /> 

И в ЯШ:

function inputFocused(obj){ 
    if(obj.title != obj.value){ 
     obj.value = ''; 
     obj.style.color = '#000'; 
    } 
} 

function inputBlurred(obj){ 
    if(obj.value == '' || obj.title == obj.value){ 
     obj.value = obj.title; 
     obj.style.color = '#AAA'; 
    } 
} 

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

input { 
    color: #AAA; 
} 


input:focus { 
    color: #000; 
} 

Answer 4

вы можете добавить любой настроенный атрибуты для DOM вашей HTML-страницы, как вам нравится, дает вам большую гибкость.