HTML-ввод onfocus и onblur - PullRequest
Новая
       23

HTML-ввод onfocus и onblur

2 голосов
/ 25 января 2012

Я пытаюсь заставить поле ввода текста иметь толстую синюю рамку вокруг него, когда оно находится в фокусе, а затем вернуть значение по умолчанию к своей обычной границе по умолчанию, когда оно больше не находится в фокусе.Одно из моих полей ввода определено так: 

<input onfocus="this.style.border='2px solid #003366';" onblur="this.style.border='';" name="attorneyName" id="attorneyName" type="text" value="John Jackson" size="50" maxlength="30">

Это правильно ставит синюю рамку вокруг него, когда оно находится в фокусе, но когда оно больше не в фокусе, оно полностью теряет текстовое поле по умолчанию.Ни одна из границ входного текстового поля не определена;их стиль является стилем по умолчанию для таких полей, и я просто хотел бы вернуть его к этому стилю после потери фокуса.

Ответы [ 4 ]

5 голосов
/ 25 января 2012

css имеет: селектор psuedo: focus, к которому вы можете прикрепить стили. 

input:focus { border:2px solid #036; }

Кроме того, не забудьте использовать правильный тип документа.<!DOCTYPE html>

1 голос
/ 25 января 2012

Вместо непосредственного изменения атрибута style с помощью JavaScript вместо добавления и удаления имени класса и использования CSS для определения класса: 

.newInputClass {
    border: 2px solid #003366;
}

И в HTML:

<input onfocus="this.className = 'newInputClass';" onblur="this.className = '';" name="attorneyName" id="attorneyName" type="text" value="John Jackson" size="50" maxlength="30">
0 голосов
/ 25 января 2012

Попробуйте это:

нет

ONBLUR = "this.style.border = 'ни';"

или, что еще лучше, избегайте встроенных стилей и меняйте класс, как предлагает @David.

0 голосов
/ 25 января 2012

Это потому, что когда вы фокусируете или «размытие», вы на самом деле удаляете весь стиль из текстового поля, а не возвращаете его к его стандартному значению.имеют следующие значения.Вы хотите стиль границы: вставка; 

border-style: inset; 
border-width: 2px;

Надеюсь, это поможет

...