Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> цвет фона некоторых полей ввода, как включать/не включать 
:(
    Опции темы
stan90
Дата 16.1.2010, 12:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 136
Регистрация: 12.11.2009

Репутация: нет
Всего: нет
при нажатии кнопки "проверить" значение первого поля и остальных сравнивается,если значения равны поля загараются зеленым цветом,если не равны красным...как  сделать чтобы не загарались те поля в которые мы ничего не вводили?

и еще как сделать чтобы кнопка "backspase" удаляла символы только в том поле на которое указаваем??

Код

<!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=windows-1251" />
<title>Документ без названия</title>
<script language="javascript">
<!--

function compute()
{
if(document.getElementById('view2').value==document.getElementById('view').value)
{document.getElementById('view2').style.background='palegreen';}
else {document.getElementById('view2').style.background='tomato';}
if((document.getElementById('view').value==document.getElementById('view3').value))
{document.getElementById('view3').style.background='palegreen';}
else {document.getElementById('view3').style.background='tomato';}
if((document.getElementById('view').value==document.getElementById('view4').value))
{document.getElementById('view4').style.background='palegreen';}
else {document.getElementById('view4').style.background='tomato';}
if((document.getElementById('view').value==document.getElementById('view5').value))
{document.getElementById('view5').style.background='palegreen';}
else {document.getElementById('view5').style.background='tomato';}
if((document.getElementById('view').value==document.getElementById('view6').value))
{document.getElementById('view6').style.background='palegreen';}
else {document.getElementById('view6').style.background='tomato';}}


function deleteChar(input)
{input.value = input.value.substring(0, input.value.length - 1);}

// -->
</script>
<form action="#" id="_form">
 <table width="100%" border="0">
   <tr>
     <td><div align="center">
         1
         <input name="view" type="text" id="view"   size="30" />
     </div></td>
   </tr>
   <tr>
     <td><div align="center">
         <p>2
           <input  type="text" name="view2" id="view2" size="30"/>
            <br />
           3
           <input id="view3" type="text" value="" size="30" />
           <br />
           4
           <input id="view4"  type="text"  size="30" />
           <br />
           5
           <input  id="view5" type="text"  size="30" />
           <br />
           6
           <input  id="view6" type="text" size="30"  />
          </p>
         </div></td>
   </tr>
   <tr>
     <td><div align="center">
       <input style="color:#000000;font-size:12px;" type=button value="   Проверить   " name="enter" onclick="compute()" />
       <input type="button" value="backspase" onclick="deleteChar(this.form.view2)" />
     </div></td>
   </tr>
 </table>
</form>
</tr>
</td>
</body>
</head>
</html>
PM MAIL   Вверх
Samotnik
Дата 16.1.2010, 13:27 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Super star !
****


Профиль
Группа: Awaiting Authorisation
Сообщений: 7192
Регистрация: 4.11.2006
Где: Минск City

Репутация: 3
Всего: 191
Цитата(stan90 @  16.1.2010,  11:13 Найти цитируемый пост)
при нажатии кнопки "проверить" значение первого поля и остальных сравнивается,если значения равны поля загараются зеленым цветом,если не равны красным...как  сделать чтобы не загарались те поля в которые мы ничего не вводили?

Код

<!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=windows-1251" />
<title>Документ с названием ^__^</title>
<script language="javascript">
<!--
function compute()
{

if(document.getElementById('view2').value==document.getElementById('view').value)
{
    document.getElementById('view2').style.background='palegreen';
}
else if (document.getElementById('view2').value== "") {
    document.getElementById('view2').style.background='';       
}
else {
    document.getElementById('view2').style.background='tomato';
}
if((document.getElementById('view').value==document.getElementById('view3').value))
    {
    document.getElementById('view3').style.background='palegreen';
    }
else if (document.getElementById('view3').value== "") {
    document.getElementById('view3').style.background='';       
}
else {
    document.getElementById('view3').style.background='tomato';
    }
if((document.getElementById('view').value==document.getElementById('view4').value))
    {    
    document.getElementById('view4').style.background='palegreen';
    }
else if (document.getElementById('view4').value== "") {
    document.getElementById('view3').style.background='';       
}
else {
    document.getElementById('view4').style.background='tomato';
    }
if((document.getElementById('view').value==document.getElementById('view5').value))
    {    
    document.getElementById('view5').style.background='palegreen';
    }
else if (document.getElementById('view5').value== "") {
    document.getElementById('view5').style.background='';       
}
else {
    document.getElementById('view5').style.background='tomato';
    }
if((document.getElementById('view').value==document.getElementById('view6').value))
    {
    document.getElementById('view6').style.background='palegreen';
    }
else if (document.getElementById('view6').value== "") {
    document.getElementById('view6').style.background='';       
}
else {
    document.getElementById('view6').style.background='tomato';
    }
}
function deleteChar(input)
{
debugger;
input.value = input.value.substring(0, input.value.length - 1);
}
// -->
</script>
<form action="#" id="_form">
 <table width="100%" border="0">
   <tr>
     <td><div align="center">
         1
         <input name="view" type="text" id="view"   size="30" />
     </div></td>
   </tr>
   <tr>
     <td><div align="center">
         <p>2
           <input id="view2" type="text"  size="30"/>
            <br />
           3
           <input id="view3" type="text" value="" size="30" />
           <br />
           4
           <input id="view4"  type="text"  size="30" />
           <br />
           5
           <input  id="view5" type="text"  size="30" />
           <br />
           6
           <input  id="view6" type="text" size="30"  />
          </p>
         </div></td>
   </tr>
   <tr>
     <td><div align="center">
       <input style="color:#000000;font-size:12px;" type=button value="   Проверить   " name="enter" onclick="compute()" />
       <input type="button" value="backspase" onclick="deleteChar(this.form)" />
     </div></td>
   </tr>
 </table>
</form>
</tr>
</td>
</body>
</head>
</html>
PM MAIL   Вверх
Amphiluke
Дата 16.1.2010, 13:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 35
Всего: 112
Зачем плодить столько кода? А если полей 100?
Код

function compute(_form) {
    var inputs = _form.getElementsByTagName("input");
    var firstField = document.getElementById("view");
    for (var i = 0; i < inputs.length; i++) {
        if ((inputs[i].type != "text") || (inputs[i].id == "view"))
            continue;
        inputs[i].style.background = (inputs[i].value == firstField.value) ? "palegreen" : ((inputs[i].value == "") ? "white" : "tomato");
    }
}


Код

<input style="color:#000000;font-size:12px;" type="button" value="   Проверить   " name="enter" onclick="compute(this.form)" />
PM   Вверх
stan90
Дата 16.1.2010, 13:42 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 136
Регистрация: 12.11.2009

Репутация: нет
Всего: нет
отлично)об я мог только мечтать)

а что с backspasОМ можно сделать?
PM MAIL   Вверх
Amphiluke
Дата 16.1.2010, 13:49 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 35
Всего: 112
Цитата(stan90 @  16.1.2010,  16:42 Найти цитируемый пост)
а что с backspasОМ можно сделать?

Код

window.onload = function() {
    var inputs = document.getElementById("_form").getElementsByTagName("input");
    var btn = document.getElementById("bkspacebtn");
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].type == "text") {
            inputs[i].onfocus = function() {
                var inp = this;
                btn.onclick = function() {
                    deleteChar(inp);
                    inp.focus();
                }
            }
        }
    }
}

Код

<input type="button" value="backspase" onclick="deleteChar(this.form.view2)" id="bkspacebtn" />


Добавлено через 2 минуты и 51 секунду
Из HTML, кстати, можно вообще выкинуть onclick
Код

<input type="button" value="backspase" id="bkspacebtn" />
PM   Вверх
stan90
Дата 16.1.2010, 13:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 136
Регистрация: 12.11.2009

Репутация: нет
Всего: нет
чего то не работает((
PM MAIL   Вверх
Amphiluke
Дата 16.1.2010, 13:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 35
Всего: 112
Цитата(stan90 @  16.1.2010,  16:55 Найти цитируемый пост)
чего то не работает((

Да ладно…
Код

<!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=windows-1251" />
<title>Документ без названия</title>
<script language="javascript" type="text/javascript">
<!--

function compute(_form) {
    var inputs = _form.getElementsByTagName("input");
    var firstField = document.getElementById("view");
    for (var i = 0; i < inputs.length; i++) {
        if ((inputs[i].type != "text") || (inputs[i].id == "view"))
            continue;
        inputs[i].style.background = (inputs[i].value == firstField.value) ? "palegreen" : ((inputs[i].value == "") ? "white" : "tomato");
    }
}

function deleteChar(input)
{input.value = input.value.substring(0, input.value.length - 1);}

window.onload = function() {
    var inputs = document.getElementById("_form").getElementsByTagName("input");
    var btn = document.getElementById("bkspacebtn");
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].type == "text") {
            inputs[i].onfocus = function() {
                var inp = this;
                btn.onclick = function() {
                    deleteChar(inp);
                    inp.focus();
                }
            }
        }
    }
}

// -->
</script>
</head>
<body>
<form action="#" id="_form">
 <table width="100%" border="0">
   <tr>
     <td><div align="center">
         1
         <input name="view" type="text" id="view"   size="30" />
     </div></td>
   </tr>
   <tr>
     <td><div align="center">
         <p>2
           <input  type="text" name="view2" id="view2" size="30"/>
            <br />
           3
           <input id="view3" type="text" value="" size="30" />
           <br />
           4
           <input id="view4"  type="text"  size="30" />
           <br />
           5
           <input  id="view5" type="text"  size="30" />
           <br />
           6
           <input  id="view6" type="text" size="30"  />
          </p>
         </div></td>
   </tr>
   <tr>
     <td><div align="center">
       <input style="color:#000000;font-size:12px;" type="button" value="   Проверить   " name="enter" onclick="compute(this.form)" />
       <input type="button" value="backspase" id="bkspacebtn" />
     </div></td>
   </tr>
 </table>
</tr>
</td>
</form>
</body>
</html>


P.S. 
Цитата(stan90 @  16.1.2010,  15:13 Найти цитируемый пост)
в том поле на которое указаваем??

Или что это вообще значит? Я понял, что это поле, имеющее фокус ввода. Нет?

Добавлено @ 14:02
Кстати, с HTML проблемы. Проверьте незакрытые теги. Я положился на ваш код, не проверил ни разу.
Сам поправил.

Это сообщение отредактировал(а) Amphiluke - 16.1.2010, 14:05
PM   Вверх
stan90
Дата 16.1.2010, 14:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 136
Регистрация: 12.11.2009

Репутация: нет
Всего: нет
теперь с backspace всё в порядке)

но зато теперь почему то все поля проверяются и закрашиваются при нажатии кнопки "проверить"..
PM MAIL   Вверх
Amphiluke
Дата 16.1.2010, 14:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 35
Всего: 112
stan90, вы исправили ошибки HTML-разметки? Смотрите последнюю редакцию моего предыдущего сообщения.

Добавлено через 3 минуты и 4 секунды
Кстати еще недосмотрел: надо убрать 
Код

</tr>
</td>
</form>
PM   Вверх
stan90
Дата 16.1.2010, 14:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 136
Регистрация: 12.11.2009

Репутация: нет
Всего: нет
всё работает)спасибо
PM MAIL   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0538 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.