Подстветка поля - JavaScript, Ajax

UKRtortik · 24.04.2014, 19:51

Как выполнить подсветку например красным цветом поля на сайте?

Stilet · 24.04.2014, 20:21

Я себе сделал функу:

Код:

function clicked(me){if(me) me.setAttribute('class','clicked');}
function clearclass(me) { if (me) { me.setAttribute('class', ''); } }

И класс:

Код:

.clicked{background-color: #B75F06;color:#FFFFFF}

Передавая в нее элемент меняю его фон. clearclass() же потом фон убирает, если хочу подсветить другое поле.

Например, грубо так:

Код:

clicked(document.getElementById('MyText'));

ATL · 24.04.2014, 20:22

JavaScript тут не обязателен, достаточно CSS:

Код:

.input {
  background-color: #FFFFFF;
  background-image: none;
  border: 1px solid #CCCCCC;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  color: #555555;
  display: block;
  font-size: 14px;
  height: 34px;
  line-height: 1.42857;
  padding: 6px 12px;
  transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
}

.input:focus {
  border-color: red;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(255, 0, 0, 0.6);
  outline: 0 none;
}

http://jsfiddle.net/556nz/

UKRtortik · 24.04.2014, 20:31

Цитата:

Сообщение от ATL

JavaScript тут не обязателен, достаточно CSS:

Код:

.input {
  background-color: #FFFFFF;
  background-image: none;
  border: 1px solid #CCCCCC;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  color: #555555;
  display: block;
  font-size: 14px;
  height: 34px;
  line-height: 1.42857;
  padding: 6px 12px;
  transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
}

.input:focus {
  border-color: red;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(255, 0, 0, 0.6);
  outline: 0 none;
}

http://jsfiddle.net/556nz/

мне поле подсветить когда например ошибка какаето, а не чтобы оно всегда было красным.

Вот например

Код:

if (data.art.value.indexOf('text') != -1) 
{
alert('Запрещено!');
return false;
}

вот если ошибка появляется запрещено, то как сделать это поле красным?

Stilet · 24.04.2014, 21:10

Ну сделай как я предлагаю

UKRtortik · 24.04.2014, 21:17

я просто не понял как работает твоя функция...

ATL · 24.04.2014, 21:25

Цитата:

Сообщение от UKRtortik

мне поле подсветить когда например ошибка какаето, а не чтобы оно всегда было красным.

А, ну да. Из фразы "Как выполнить подсветку например красным цветом поля на сайте?" это ведь очевидно.

Рекомендую смотреть в сторону HTML5 атрибутов: required и pattern.
Если они не удовлетворят Ваши потребности - выберите подходящий вариант десятков тысяч способов валидации на JS.

UKRtortik · 28.04.2014, 13:26

ну так как это можно реализовать в моем примере?

Stilet · 28.04.2014, 15:17

Смотри:

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <script  type="text/javascript">
   function Color(me, acolor,afontColor) { if(me) {me.style.backgroundColor = acolor; if(afontColor) me.style.foreColor = acolor;} }
   function foo(me){
    if(me.value.length>2) {Color(me,'#F77481','#FFFFFF'); alert("no"); me.focus();} else Color(me,'#FFFFFF','#000000');
   }
  </script>
  <!--js-->
</head>

<body>
<input  onchange="foo(this)"/>
<input  onchange="foo(this)"/>
</body>
</html>

Когда перескакиваешь на другое поле обработчик проверяет на валидность (условие свое поставишь) введенного, и если невалидно выводит алерт и окрашивает другим цветом.
Это общая идея, то что я предложил немного универсальней и сложнее. Но поскольку ты не понимаешь я постарался максимально упростить.

UKRtortik · 28.04.2014, 16:24

Stilet, спасибо, но я уже решил проблему!

24.04.2014, 19:51	#1
UKRtortik Форумчанин Регистрация: 25.02.2014 Сообщений: 366	Подстветка поля Как выполнить подсветку например красным цветом поля на сайте?

24.04.2014, 20:21	#2
Stilet Белик Виталий :) Старожил Регистрация: 23.07.2007 Сообщений: 57,097	Я себе сделал функу: Код: `function clicked(me){if(me) me.setAttribute('class','clicked');} function clearclass(me) { if (me) { me.setAttribute('class', ''); } }` И класс: Код: `.clicked{background-color: #B75F06;color:#FFFFFF}` Передавая в нее элемент меняю его фон. clearclass() же потом фон убирает, если хочу подсветить другое поле. Например, грубо так: Код: `clicked(document.getElementById('MyText'));` I'm learning to live...

28.04.2014, 15:17	#9
Stilet Белик Виталий :) Старожил Регистрация: 23.07.2007 Сообщений: 57,097	Смотри: Код: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> function Color(me, acolor,afontColor) { if(me) {me.style.backgroundColor = acolor; if(afontColor) me.style.foreColor = acolor;} } function foo(me){ if(me.value.length>2) {Color(me,'#F77481','#FFFFFF'); alert("no"); me.focus();} else Color(me,'#FFFFFF','#000000'); } </script> <!--js--> </head> <body> <input onchange="foo(this)"/> <input onchange="foo(this)"/> </body> </html> Когда перескакиваешь на другое поле обработчик проверяет на валидность (условие свое поставишь) введенного, и если невалидно выводит алерт и окрашивает другим цветом. Это общая идея, то что я предложил немного универсальней и сложнее. Но поскольку ты не понимаешь я постарался максимально упростить. I'm learning to live...

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Поля	lypyotr	Общие вопросы Delphi	15	19.07.2012 14:13
Измененние цвета фона поля (поля со списком) при редактировании	TimRus	Microsoft Office Access	2	17.05.2010 21:56
получить данные поля исходя из lookup-поля	malayka	Помощь студентам	0	21.04.2010 21:19
как получить значение поля грид на основе значения другого lookUp поля	malayka	БД в Delphi	0	21.04.2010 19:06
Выявление одинаковости значений поля в одной талице по значению поля в другой	nikmay	SQL, базы данных	4	13.08.2009 12:51

24.04.2014, 21:10	#5
Stilet Белик Виталий :) Старожил Регистрация: 23.07.2007 Сообщений: 57,097	Ну сделай как я предлагаю I'm learning to live...

24.04.2014, 21:17	#6
UKRtortik Форумчанин Регистрация: 25.02.2014 Сообщений: 366	я просто не понял как работает твоя функция...

28.04.2014, 13:26	#8
UKRtortik Форумчанин Регистрация: 25.02.2014 Сообщений: 366	ну так как это можно реализовать в моем примере?

28.04.2014, 16:24	#10
UKRtortik Форумчанин Регистрация: 25.02.2014 Сообщений: 366	Stilet, спасибо, но я уже решил проблему!