Удаление символов и подстановка слэша
Сделал вот такую клавиатуру, с невозможностью ввода символов кроме тех которые я разрешил.
<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, время: 23:48. |