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

Question

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

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

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

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

Answer 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

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

Answer 2

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

Answer 3

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

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

Answer 4

Добавить событие 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="";
}

Answer 5

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

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

и все, и, конечно, вы не будете беспокоиться о несовместимости браузеров, это проблема команды jquery:D LOL

Answer 6

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

- это все, что вам нужно, чтобы изменить цвет границы обратно.

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

Answer 7

Если пользователи вводят неправильное значение, примените красную границу 1px к полю ввода:

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

Если пользователь вводит правильное значение, удалите границу из поля ввода:

document.getElementById('fName').style.border ="";