Удаление символов и подстановка слэша
Сделал вот такую клавиатуру, с невозможностью ввода символов кроме тех которые я разрешил.
<form id="keys" action="action.php" method="post" name="term"> <table align="center" class="bg" width="700" border="0" cellspacing="0" cellpadding="0"> <tr class="tr"> <td width="350" valign="top"><div id="center"> <input name="calc" id="txt" class="pole" type="text" size="10" maxlength="10" onkeyup="this.value = this.value.replace(/[^0-9/]/, '')" /> </div> </td> <td width="350" valign="top"><div class="keypad"> <input value="1" class="buttons1" type="button" onClick="document.term.txt.value+='1';"> <input value="2" class="buttons1" type="button" onClick="document.term.txt.value+='2';"> <input value="3" class="buttons1" type="button" onClick="document.term.txt.value+='3';"> <input value="4" class="buttons1" type="button" onClick="document.term.txt.value+='4';"> <input value="5" class="buttons1" type="button" onClick="document.term.txt.value+='5';"> <input value="6" class="buttons1" type="button" onClick="document.term.txt.value+='6';"> <input value="7" class="buttons1" type="button" onClick="document.term.txt.value+='7';"> <input value="8" class="buttons1" type="button" onClick="document.term.txt.value+='8';"> <input value="9" class="buttons1" type="button" onClick="document.term.txt.value+='9';"> <input value="0" class="buttons1" type="button" onClick="document.term.txt.value+='0';"> <input value="/" class="buttons1" type="button" onClick="document.term.txt.value+='/';"> <input value="C" class="reset" type="button" onClick="reset();"> </div></td> </tr> <tr> <td width="700" colspan="2" align="right" valign="bottom" class="buttons"> <input class="next" name="button" type="image" value=" " src="img/next.png"> </td> </tr> </table> <table align="center" width="700" border="0" cellspacing="0" cellpadding="0"> <tr> <td> </td> </tr> </table> </form> Помогите доделать скрипт чтобы при вводе 00 сразу добавлялся "/", а при нажатии на "C" убирались последние символы до "/", пример правильного ввода: 01/0101/01, все остальные неправльно, слэши должны быть именно в таком порядке. Как это можно реализовать? Я только учусь поэтому не знаю как так сделать. Желательно примером. Заранее благодарен всем отозвавшимся. |
nelegal,
Masked Input <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://jquery-joshbush.googlecode.com/files/jquery.maskedinput-1.2.2.min.js" ></script> <script language="JavaScript" type="text/javascript"> jQuery(function($) { $('#txt').mask('99/9999/99'); }); </script> </head> <body> <input name="calc" id="txt" class="pole" type="text" size="10" maxlength="10" /> </body> </html> |
спасибо, но некорректно работает, что то (((
вводишь один символ с клавиатуры и курсор прыгает в конец строки, а с виртуальной клавы ввобще маска не подставляется.... |
nelegal,
непонял зачем комбинировать плагин и вашу виртуальную клавиатуру, если плагин её функционално заменяет :) и зачем нужен onkeyup в вашем коде если предусмотрен только ввод с виртуальной клавиатуры... ......вариант для маски 12/3456/78 и виртуальной клавиатуры ))) <!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> <title></title> <script language="JavaScript" type="text/javascript"> function set(b) { var a = document.getElementById("txt"); if (!(b && a.value.length == 10)) a.value = b ? (a.value + b).replace(/(^\d{2}$)|(^\d{2}\/\d{4}$)/, "$1$2/") : a.value.replace(/\d+$|\d+\/$/, "") }; </script> </head> <body> <form id="keys" action="action.php" method="post" name="term"> <table align="center" class="bg" width="700" border="0" cellspacing="0" cellpadding="0"> <tr class="tr"> <td width="350" valign="top"> <div id="center"> <input name="calc" id="txt" class="pole" type="text" size="10" maxlength="10" readonly= "readonly" /> </div> </td> <td width="350" valign="top"> <div class="keypad"> <input value="1" class="buttons1" type="button" onclick="set('1')" /> <input value="2" class="buttons1" type="button" onclick="set('2')" /> <input value="3" class="buttons1" type="button" onclick="set('3')" /> <input value="4" class="buttons1" type="button" onclick="set('4')" /> <input value="5" class="buttons1" type="button" onclick="set('5')" /> <input value="6" class="buttons1" type="button" onclick="set('6')" /> <input value="7" class="buttons1" type="button" onclick="set('7')" /> <input value="8" class="buttons1" type="button" onclick="set('8')" /> <input value="9" class="buttons1" type="button" onclick="set('9')" /> <input value="0" class="buttons1" type="button" onclick="set('0')" /> <input value="C" class="reset" type="button" onclick="set();" /> </div> </td> </tr> <tr> <td width="700" colspan="2" align="right" valign="bottom" class="buttons"> <input class="next" name="button" type="image" value=" " src="img/next.png" /> </td> </tr> </table> <table align="center" width="700" border="0" cellspacing="0" cellpadding="0"> <tr> <td> </td> </tr> </table> </form> </body> </html> |
Супер. спасибо огромное. Точно так как хотел.
|
Че то IE (7 версия) ругается на ошибку в скрипте, а в остальных браузерах работает.
|
nelegal,
картинку перезалейте на общедоступный сервер Доступ на сайт http://incorrect.dyndns.org/ разрешен только абонентам Дальсвязи. |
Часовой пояс GMT +3, время: 04:03. |