HTML ввод onfocus и onblur

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

<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 2
html input onblur

4 ответа:

Вместо того, чтобы напрямую изменять атрибут 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">
1

Css имеет селектор psuedo :focus, к которому можно присоединить стили.

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

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

5

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

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

Задайте для оператора blur следующие значения. Вы хотите стиль границы: вставка; 

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

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

0

Попробуйте следующее:

Onblur= " это.стиль.border= 'none'; "

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

0