[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Вопрос по HTML
Форум PHP программистов > JavaScript
Daess
23.07.2006 - 19:41
Не нашел такого раздела на форуме, напишу хоть сюда. Проблема: есть два RADIO переключателя, каждый соответствует определенному полю ввода. (ситуация: телефон домашний и мобильный) Надо сделать так, чтобы при выборе одного переключателя активировалось одно поле, а второе блокировалось (ну т.б. можно ввести только один номер телефона - либо дом, либо моб) Это первый вопрос.
Второй вопрос - как сделать автопереход из поля в поле, т.е. вот есть три поля для трех частей телефона (типа 543-21-00) Юзер тыкает в первое поле, вбивает 3 символа, после этого курсор должне сам перескочить в следующее поле. как?



Спустя 30 минут, 12 секунд (23.07.2006 - 19:11) Leningrad00 написал(а):
По моему, не надо блокировать. Пусть будет одно поле и две радио-кнопки.
Перевод фокуса: document.all.object_id.focus()

Спустя 24 минуты, 22 секунды (23.07.2006 - 19:35) Daess написал(а):
Leningrad00, ну а вообще-то блокирование можно сделать?? И куда вставить этот "перевод фокуса"? К концу дня уже ничо не разумею...:(((

Спустя 9 минут, 26 секунд (23.07.2006 - 19:45) Leningrad00 написал(а):
Блокиование, безусловно, есть. Тока я не знаю, никогда не сталкивался.<br> Перевод фокуса вставить в событие, по которому он должен происходить.<br> Пусть надо перевести его, когда ввели три символа в первое поле:<br> 
 
 if(ДлинаПервогоПоля==3)
  {
    document.all.id_второго_поля.focus()
  /*обратная скобка у меня не работает, ну нет кнопки*/
 

Спустя 2 часа, 42 минуты, 6 секунд (23.07.2006 - 22:27) Timok написал(а):
для блокирования елементов формы в html есть флаг disabled<br>это можно сделать примерно так <br>
onClick="document.forms[0].elements[0].disabled=true"

можно не блокировать, а скрыть поле через style.visibility или style.display

для перевода нужно как-то постоянно измерять длинну строки в текстовом поле (elements[x].vaue.length ?), обработчик onChange вроде отвечает за изменение данных в поле, точно не помню.

Спустя 4 минуты, 1 секунда (23.07.2006 - 22:31) Daess написал(а):
Первый вопрос закрыт - решил через innerHTML, а вот с автопереводом все еще траблы....:(( Как раз уперся в условие проверки количества символов... Что конкретно OnChange делает и как?

Спустя 2 часа, 33 минуты, 48 секунд (24.07.2006 - 01:05) Leningrad00 написал(а):
OnChange работает только после перевода фокуса. Он действительно сравнивает, но только после перефокусировки.
Наверное, SetTimeout и проверять каждые скольто-то там секунд. . .

Спустя 2 часа, 9 минут, 6 секунд (24.07.2006 - 03:14) Timok написал(а):
// функция запускается, когда курсор 
// ставится в первое текствое поле
// и крутит цикл, пока не наберется n символов
function func(n){
  while (true){
    if (document.forms[0].elements[0].value.length == n){ 
      document.forms[0].elements[1].focus();
      break;
    }
  }
}
 
// например когда наберется 5 символов, курсор 
// перейдет в другое поле
<input type="text" onFocus="func(5)">
<input type="text">

она работает, только пользоваться ей я не рекомендую. Там действительно где-то нужно поставить setTimeout, может цикл рекурсией надо заменить, хрен его знает...

Спустя 4 часа, 28 минут, 8 секунд (24.07.2006 - 07:42) Daess написал(а):
ИМХО сеттаймаут не решает, ведь скорость набора разная у всех....

Спустя 41 минута, 40 секунд (24.07.2006 - 08:24) Leningrad00 написал(а):
Я не знаю, что есть предложенный выше код. Ето ужоз.
Кто против таймаута, пусть предложит что-то симпатичней.

Спустя 15 минут, 22 секунды (24.07.2006 - 08:39) Daess написал(а):
Ды вот в этом и дело что и предложить-то нечего, думаю....

Спустя 13 минут, 54 секунды (24.07.2006 - 08:53) Leningrad00 написал(а):
<script language="javascript" >
var z;
z=true;
function op(){
if(((document.forms[0].elements[0].value.length)>4)&(z==true)){
document.forms[0].elements[1].focus();
z=false;
}
setTimeout("op()",100);
}

<form >
<input type="text" onFocus="javascript:op()" maxlength="5" size="5" >
<input type="text" onFocus="javascript:z=true" >
</form >

Спустя 22 минуты, 55 секунд (24.07.2006 - 09:16) Daess написал(а):
Хитрая весчь....:/ Но если честно что-то не догоню, как оно работает....

Спустя 31 минута, 22 секунды (24.07.2006 - 09:47) Leningrad00 написал(а):
Как хотели, так и работает.
Вводишь в первое поле, начинает работать таймер, проверяет каждые 0,1 сек. состояние первого поля. Когда длина значения поля становится больше четырех, переводит курсор во второе поле.
Переменная z определяет логическое условие для того, чтобы можно было вернуться в первое поле при, например, неправильном вводе данных. При повторном насильственном обращении в первому полю, уже ничто никуда не переводится.

Спустя 11 часов, 25 минут, 43 секунды (24.07.2006 - 21:13) Daess написал(а):
В таком случае неясно, почему при повторном выборе первого поля функция не срабатывает. Или onFocus реагирует только на первый выбор? Можно ли сделать обратный переход, т.е. удаляешь символы, когда кончаются - переход на предыдущее?

Спустя 3 часа, 20 минут (25.07.2006 - 00:33) Leningrad00 написал(а):
Мысль такова: переход только для удобства; если пользователь вернулся, значит, он где-то напортачил.
А если напортачил, то может и сам курсор перевести. Нефек фикню вводить.
Я так вижу.

Спустя 10 часов, 42 минуты, 3 секунды (25.07.2006 - 11:15) Daess написал(а):
:)))))) А с первым вопрос про фокус как?

Спустя 34 минуты, 11 секунд (25.07.2006 - 11:49) Leningrad00 написал(а):
А что про фокус?

Спустя 4 минуты, 1 секунда (25.07.2006 - 11:53) Daess написал(а):
Да разобрался уже. Теперь пытаюсь настроить этот алгоритм на работу с несколькими полями. Решил сделать массиив из ID элементов. JavaScript берет элемент массива так же, как и Паскаль? array_name[i]?

Спустя 9 минут, 59 секунд (25.07.2006 - 12:03) Leningrad00 написал(а):
Да.

Спустя 28 минут, 9 секунд (25.07.2006 - 12:31) Daess написал(а):
А почему она тогда меня ошибками стращает?<br>
 
<script language="javascript">
var z,ids,i;
z=true; ids=new Array("ph_1","ph_2","ph_3"); i=1;
function op_stac(){
  if (((document.all.ids[i].value.length)>1)&(z==true)&(!(i==3))){
    document.all.ids[++i].focus();
    z=false;
      }
  setTimeout("op_stac()",100);
    }
</script>
 

Вот так немного переделал. Если написать вот так:
 
<script language="javascript">
var z,ids,i;
z=true; ids=new Array("ph_1","ph_2","ph_3"); i=1;
function op_stac(){
  if (((document.all.ph_1.value.length)>1)&(z==true)&(!(i==3))){
    document.all.ph_2.focus();
    z=false;
      }
  setTimeout("op_stac()",100);
    }
</script>
 

То все работает, но только для двух полей соотвественно ph_1 и ph_2. А с массивами ругается...

Спустя 11 минут, 18 секунд (25.07.2006 - 12:43) Leningrad00 написал(а):
Не страдаю телепатией. Дай весь код.

Спустя 7 минут, 11 секунд (25.07.2006 - 12:50) Daess написал(а):
Ну держись.....:
PHP
  1.  
  2. <html>
  3.  <head><meta http-equiv=Content-Type content="text/html; charset=windows-1251">
  4.   <title>Договор</title>
  5.  </head>
  6.  <body bgcolor="#FFFFFF" text="#FFFFFF">
  7. &#60;script language="javascript">
  8. var z,ids,i;
  9. z=true; ids=new Array("ph_1","ph_2","ph_3"); i=0;
  10. function op_stac(){
  11.   if (((document.all.ids[i].value.length)>1)&(z==true)&(!(i==3))){
  12.     document.all.ids[++i].focus();
  13.     z=false;
  14.       }
  15.   setTimeout("op_stac()",100);
  16.     }
  17. </script>
  18. &#60;script language="javascript">
  19. var z,i;
  20. z=true; i=24;
  21. function op_mob(){
  22.   if(((document.forms[0].elements[i].value.length)>1)&(z==true)&(!(i==27))){
  23.     document.forms[0].elements[++i].focus();
  24.     z=false;
  25.       }
  26.   setTimeout("op()",100);
  27.     }
  28. </script>
  29. &#60;script type="text/javascript">
  30. function CheckForm(f) {
  31.   for (i = 0; i < f.elements.length; ++i){
  32.    if (!(i == 6)) {
  33.     if ( f.elements[i].value == '' ) {
  34.        alert("Не все обязательные поля заполнены!");
  35. 	   f.elements[i].focus();
  36.        return false;
  37.     }
  38. 	}
  39.   }
  40.   return true;
  41. } // check().
  42. function t_home() {
  43.  elem=document.all('ph');
  44.  elem.innerHTML='<input type="text" id="ph_1" onFocus="java script:op_stac()" name="phone_1" size="2" maxlength="2">-<input id="ph_2" type="text" onFocus="java script:z=true; java script:op_stac()" name="phone_2" size="2" maxlength="2">-<input id="ph_3" type="text" onFocus="java script:z=true" name="phone_3" size="2" maxlength="2">';
  45. }
  46. function t_mob() {
  47.  elem=document.all('ph');
  48.  elem.innerHTML='<input readonly="8" type="text" name="phone_1" size="1" value="8">-<input type="text" name="phone_2" size="3" maxlength="3">-<input type="text" name="phone_3" size="3" maxlength="3">-<input type="text" name="phone_4" size="2" maxlength="2">-<input type="text" name="phone_5" size="2" maxlength="2">';
  49.  }
  50. </script>
  51.  <form action="anketa.php" method="POST" OnSubmit="return CheckForm(this)">
  52.  <table width="750"  border="1" align="center" bordercolor="#3366CC">
  53.    <tr bgcolor="#3366CC">
  54.     <td colspan="2" align="left">[b]Личные данные[/b]</td>
  55.   </tr>
  56.  ...
  57.  ...
  58. *тут много кода*
  59.  ...
  60.  ...
  61.     <td style="width: 300px"><p style="margin-left: 10px">Телефон*</p></td>
  62.     <td>
  63. 	<input type="radio" checked name="tel" value="stac" onclick="t_home()">Домашний 	  
  64. 	<input type="radio" name="tel" value="mob" onclick="t_mob()">Мобильный <b id="ph">
  65. 	<input type="text" id="ph_1" onFocus="java script:op_stac()" name="phone_1" size="2" maxlength="2">-
  66. 	<input id="ph_2" type="text" onFocus="java script:z=true; java script:op_stac()" name="phone_2" size="2" maxlength="2">-
  67. 	<input id="ph_3" type="text" onFocus="java script:z=true" name="phone_3" size="2" maxlength="2"></b>	
  68.   </tr>
  69.  ...
  70.  ...
  71. *тут остатки*
  72.  ...
  73.  ...
  74.     <td align="right"><input type="submit" name="ready" value="Готово"><input type="reset" value="Очистить"></td>
  75.   </tr> 
  76. </table>
  77.  </form>
  78.  </body></html>
  79.  

Спустя 10 минут, 25 секунд (25.07.2006 - 13:00) Daess написал(а):
Вообще шиза: вот ЭТО работает без вопросов, хотя код такой же...
PHP
  1.  
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  3. "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. &#60;script language="javascript">
  7. var z,i,mas;
  8. z=true; i=0; mas=new Array('first','second','third');
  9. function op(){
  10.   if(((document.forms[0].mas[i].value.length)>1)&(z==true)&(!(i==2))){
  11.     document.forms[0].mas[++i].focus();
  12.     z=false;
  13.       }
  14.   setTimeout("op()",100);
  15.     }
  16. </script>
  17. <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  18. <title>Untitled Document</title>
  19. </head>
  20.  
  21. <body>
  22. <form>
  23. <input type="text" id="first" onFocus="java script:op()" maxlength="2" size="2">-
  24. <input type="text" id="second" onFocus="java script:z=true; java script:op()" maxlength="2" size="2">-
  25. <input type="text" id="third" onFocus="java script:z=true" maxlength="2" size="2">
  26. </form>
  27. </body>
  28. </html>
  29.  
  30.  

Спустя 33 минуты, 4 секунды (25.07.2006 - 13:33) Leningrad00 написал(а):
Позволю усомниться. Вот это:
QUOTE
document.forms[0].mas[i]

работать не может. Нельзя туда переменную впихнуть. Разве только через getElementById.
Приведенный мной выше пример работает? Чего вы еще хотите. . .
Рекомендую не писать одну функцию для обработки всех полей, а сделать для каждого свою. Уже потом, если поймаешь в них формулу, пытаться формализовать.

Спустя 2 минуты, 10 секунд (25.07.2006 - 13:36) Daess написал(а):
Не успел написать - действенно не работает, не обновил страницу....

Спустя 1 минута, 20 секунд (25.07.2006 - 13:37) Daess написал(а):
Меня возмущает, что если в лоб написать вместо обращения к массиву идентификтор поля, то работает, хоть и для даух полей...

Спустя 6 минут, 58 секунд (25.07.2006 - 13:44) Leningrad00 написал(а):
Поглядывай иногда в подробности ошибок сценария. Все получится.

Спустя 16 минут, 52 секунды (25.07.2006 - 14:01) Daess написал(а):
Такой вопрос: есть выражение: elem=document.all('ph_1') Оно находит и присваивает элемент с ID="ph_1". Можно ли оперируя этой переменной, получить фокус на следующее поле? Не знаю, что-то типа next(elem), что-то *цензура*ожее...

Спустя 1 час, 15 минут, 5 секунд (25.07.2006 - 15:16) Leningrad00 написал(а):
Не помню такого.
PHP
  1.  
  2. <html>
  3. <body onLoad="java script:document.forms[0].elements[0].focus()">
  4. &#60;script language="javascript">
  5. var z;
  6. z=true;i=0;s=0;
  7. function op(){
  8.   if(((document.forms[0].elements[i].value.length)>4)&(z==true)){
  9.     document.forms[0].elements[++i].focus();
  10.       }
  11.   setTimeout("op()",50);
  12.     }
  13. </script>
  14. <form>
  15. <input type="text" onFocus="java script:i=0;op()" maxlength="5" size="3">
  16. <input type="text" onFocus="java script:i=1;op()" maxlength="5" size="3">
  17. <input type="text" onFocus="java script:i=2;op()" maxlength="5" size="3">
  18. <input type="text" onFocus="java script:z=false" maxlength="5" size="3">
  19. </form>
  20. </body>
  21. </html>
  22.  

Спустя 4 часа, 13 минут, 20 секунд (25.07.2006 - 19:29) Daess написал(а):
Спасиб, я уже чето нафантазировал, нормально вышло, по крайней мере терпимо. Спасибо за помощь. Теперь осталось с Вордом разобраться и все в ажуре.

Спустя 13 часов, 35 минут, 36 секунд (26.07.2006 - 09:05) Daess написал(а):
Такой вопрос: можно ли как-нить прописать меты, чтобы при печати из IE не печатались поля с названием и адресом страницы?

Спустя 2 часа, 31 минута, 8 секунд (26.07.2006 - 11:36) Leningrad00 написал(а):
И чтобы кинескоп монитора вываливался на стол.

Спустя 1 час, 50 минут, 58 секунд (26.07.2006 - 13:27) Daess написал(а):
Острить я так понимаю было обязательно, да? Можно или нет?

Спустя 6 минут, 15 секунд (26.07.2006 - 13:33) Leningrad00 написал(а):
Я не знаю.


_____________
Быстрый ответ:
Powered by dgreen

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.