Изменение цвета рамки текстового поля с помощью javascript

Я делаю проверку формы. когда ввод формы неверен, добавьте красную рамку в текстовое поле:

document.getElementById("fName").style.borderColor="#FF0000"

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

может кто-нибудь сказать мне, как я изменяю размер и цвет рамки в javascript

Ответы

Ответ 1

Используйте стили CSS с CSS-классами вместо

CSS

.error {
  border:2px solid red;
}

Теперь в Javascript

document.getElementById("fName").className = document.getElementById("fName").className + " error";  // this adds the error class

document.getElementById("fName").className = document.getElementById("fName").className.replace(" error", ""); // this removes the error class

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

Ответ 2

document.getElementById("fName").style.border="1px solid black";

Ответ 3

Добавьте к элементу ввода событие onchange:

<input type="text" id="fName" value="" onchange="fName_Changed(this)" />

JavaScript:

function fName_Changed(fName)
{
    fName.style.borderColor = (fName.value != 'correct text') ? "#FF0000"; : fName.style.borderColor="";
}

Ответ 4

Вы можете попробовать

document.getElementById('name').style.borderColor='#e52213';
document.getElementById('name').style.border='solid';

Ответ 5

document.getElementById("fName").style.borderColor="";

- это все, что нужно для изменения цвета рамки.

Чтобы изменить размер рамки, используйте element.style.borderWidth = "1px".

Ответ 6

Я согласен с Vicente Plata, вам следует попробовать использовать jQuery. IMHO - лучшая библиотека javascript. Вы можете создать класс в вашем файле CSS и просто сделать с jquery:

$('#fName').addClass('name_of_the_class');

и что все, и, конечно, вас не беспокоит несовместимость браузеров, проблема с jQuery командой: D LOL