Javascript-форум - Ввод в тестовое поле по маске

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Ввод в тестовое поле по маске (https://javascript.ru/forum/misc/3575-vvod-v-testovoe-pole-po-maske.html)

Ввод в тестовое поле по маске

Необходимо ввести значение в текстовое поле по маске
Номер телефона : +7(###) ###-####
Балл : #/#

Вот такой код
<HEAD>

<script type='text/javascript' src='dFilter.js'></script>
</script>

</HEAD>

<BODY>

<form name="fred" action="fred.htm" method="post">
<table>
<tr>
<td>Phone:</td>
<td><input value="" type="text" onKeyDown="javascript:return dFilter (event.keyCode, this, '+7(###) ###-####');" style="font-family:verdana;font-size:10pt;width:110px;"></td>
</tr>

<tr>
<td>Ball:</td>
<td><input value="" type="text" onKeyDown="javascript:return dFilter (event.keyCode, this, '# /#');" style="font-family:verdana;font-size:10pt;width:110px;"></td>
</tr>
</table>
</form>

и JS скрипт

var dFilterStep

function dFilterStrip (dFilterTemp, dFilterMask)
{
dFilterMask = replace(dFilterMask,'#','');
for (dFilterStep = 0; dFilterStep < dFilterMask.length++; dFilterStep++)
{
dFilterTemp = replace(dFilterTemp,dFilterMask.substring(dFilterS tep,dFilterStep+1),'');
}

return dFilterTemp;

}

function dFilterMax (dFilterMask)
{
dFilterTemp = dFilterMask;
for (dFilterStep = 0; dFilterStep < (dFilterMask.length+1); dFilterStep++)
{
if (dFilterMask.charAt(dFilterStep)!='#')
{
dFilterTemp = replace(dFilterTemp,dFilterMask.charAt(dFilterStep ),'');
}
}
return dFilterTemp.length;
}

function dFilter (key, textbox, dFilterMask)
{
dFilterNum = dFilterStrip(textbox.value, dFilterMask);

if (key==9)
{
return true;
}
else if (key==8&&dFilterNum.length!=0)
{
dFilterNum = dFilterNum.substring(0,dFilterNum.length-1);
}
else if ( ((key>47&&key<58)||(key>95&&key<106)) && dFilterNum.length<dFilterMax(dFilterMask) )
{
dFilterNum=dFilterNum+String.fromCharCode(key);
}

var dFilterFinal='';
for (dFilterStep = 0; dFilterStep < dFilterMask.length; dFilterStep++)
{
if (dFilterMask.charAt(dFilterStep)=='#')
{
if (dFilterNum.length!=0)
{
dFilterFinal = dFilterFinal + dFilterNum.charAt(0);
dFilterNum = dFilterNum.substring(1,dFilterNum.length);
}
else
{
dFilterFinal = dFilterFinal + "";
}
}
else if (dFilterMask.charAt(dFilterStep)!='#')
{
dFilterFinal = dFilterFinal + dFilterMask.charAt(dFilterStep);
}
// dFilterTemp = replace(dFilterTemp,dFilterMask.substring(dFilterS tep,dFilterStep+1),'');
}

textbox.value = dFilterFinal;
return false;
}

function replace(fullString,text,by) {
// Replaces text with by in string
var strLength = fullString.length, txtLength = text.length;
if ((strLength == 0) || (txtLength == 0)) return fullString;

var i = fullString.indexOf(text);
if ((!i) && (text != fullString.substring(0,txtLength))) return fullString;
if (i == -1) return fullString;

var newstr = fullString.substring(0,i) + by;

if (i+txtLength < strLength)
newstr += replace(fullString.substring(i+txtLength,strLength ),text,by);

return newstr;
}

Вопрос: как сделать так, чтобы разделяющие символы (скобки, - и /) появлялись не сразу как поле получает фокус и вводиться первый символ..а по мере ввода значения в поля..
Т.е. если в поле Балл введен один символ, то слеш не должен выводиться вообще, а появляться лишь когда пользователь пытается ввести второй.
Всем кто готов помочь, заранее спасибо

Код нифига не понял.

Думается мне, тут нужно простое сравнение с регулярным выражением.

В целом, Jeff Raskin таки заявляет, что модальность GUI не нужна. (Модальность в данном случае проявляется в том, что набор кнопочек, которые может тыкнуть пользователь, определяется каким-то внутренним состоянием программы. Frustrating.)

> '+7(###) ###-####'

Регулярное выражение же! +7\(\d\d\d\)\ \d\d\d-\d\d\d\d (или как-то так, что-то я позабыл правила экранирования.).

Другое дело, что сравнивать с регулярным выражением можно прямо во время ввода пользователя, инкрементно (как поиск по документу в FF, Chrome -- Ctrl+F, затем пишешь слова и сразу же, не отходя от кассы, видишь совпадения, если таковые найдутся.). Такой подход зело лучше, опять же по Раскину. Нахожу, что так действительно удобнее.

так нужно же не чтобы введенное значение совпадало с каким то конкретным видом записи, что действительно можно проверить с помощью регулярного выражения.
А чтобы пользователю НЕ ВВОДИТЬ все эти скобки, -, / , а чтобы они сами автоматически поставлялись по мере ввода значения в поле

Цитата:

Сообщение от ZoNT (Сообщение 18155)

http://javascript.ru/forum/project/1....html#post4989

Вызывать так?
<input name="ball" type="text" onKeyDown="setMask('this','99.99.9999')">

> А чтобы пользователю НЕ ВВОДИТЬ все эти скобки, -, / , а чтобы они сами автоматически поставлялись по мере ввода значения в поле

Мне кажется, что нажать пробел это не такая уж сложная задача. :)

К тому же, ситуация с полем немного сложнее, ибо

+7(###) ###-####
7##########
7 ### ### ####

-- одинаковые номера. Пусть люди пишут, как хотят, ящитаю.

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

Цитата:

Сообщение от Артем Шалхаков

Мне кажется, что нажать пробел это не такая уж сложная задача.

По любому будут без пробелов лепить.

Цитата:

Сообщение от Артем Шалхаков (Сообщение 18158)

> Пусть люди пишут, как хотят, ящитаю.

Ну так считайте и делайте как вам нравиться..у меня стоит конкретная задача и именно ее нужно решить,

Цитата:

Сообщение от Артем Шалхаков (Сообщение 18158)

>
Мне кажется, что нажать пробел это не такая уж сложная задача.

А пробелы же на самом деле никто нажимать не будет

Цитата:

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

Вызывать так?
<input name="ball" type="text" onKeyDown="setMask('this','99.99.9999')">

<input type="text" id="_tt" name="ball">
	<script type="text/javascript">
	setMask('_tt','99.99.9999');
	</script>

Скрипт маскированного ввода до этого должен быть уже подключен.

Цитата:

Сообщение от Артем Шалхаков (Сообщение 18158)

>
Что же касается балла, то тут можно использовать слайдер, оно и нагляднее как-то.

Не совсем понятно..если не трудно поподробнее