Forum Webscript.Ru

Программирование => JavaScript & JScript => Тема начата: covex1 от 27 Июня 2005, 14:19:23

Название: Маска ввода в input
Отправлено: covex1 от 27 Июня 2005, 14:19:23: Можно ли как-то сделать маску ввода для поля input?
Ну скажем номер телефона с префиксом (xxx)xxx-xx-xx
На чем это вообще можно реализовать для веба?
Название: Маска ввода в input
Отправлено: Меняздесьдавнонет от 27 Июня 2005, 14:40:36: а что - у тебя много вариантов? Яваскрипт
Название: Маска ввода в input
Отправлено: covex1 от 27 Июня 2005, 14:45:45: Понятно что "голый" HTML с этим не справиться. Яваскрипт для меня темный лес. Может есть место в инете где можно посмотреть как это работает?
Название: Маска ввода в input
Отправлено: Xander от 27 Июня 2005, 17:02:21: на этом сайте есть форум по яваскрипту
поищи, может там что подходящее найдется

P.S. тему переношу туда
Название: Маска ввода в input
Отправлено: CGVictor от 27 Июня 2005, 17:30:24: covex1
RomikChef
Я бы предложил на onSubmit вешать обработчик с регекспом...
Название: Маска ввода в input
Отправлено: covex1 от 27 Июня 2005, 18:56:46: Решение найдено:

Сам код javascript:
var dFilterStep

function dFilterStrip (dFilterTemp, dFilterMask)
{
dFilterMask = replace(dFilterMask,\'#\',\'\');
for (dFilterStep = 0; dFilterStep < dFilterMask.length++; dFilterStep++)
{
dFilterTemp = replace(dFilterTemp,dFilterMask.substring(dFilterStep,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>95&&key<106) //fixes keypad input
{
key=key-48
}
if ((key==9) || (key==13)) // fixes tab and enter keys
{
return true;
}
if (key==46)// delete key erases the whole field
{
dFilterNum = dFilterStrip(\'\', dFilterMask);
}

if (document.selection.createRange().text.length==dFilterMask.length) //erase the whole field if selected
{
dFilterNum = dFilterStrip(\'\', dFilterMask);
dFilterNum = dFilterNum+String.fromCharCode(key);
}
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{
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(dFilterStep,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;
}
Название: Маска ввода в input
Отправлено: CGVictor от 27 Июня 2005, 19:19:22: covex1
Что-то обьективно [off]до хрена[/off]...

onSubmit="return forms[\'form\'].elements[\'element\'].value.match(regexp);"

Что скажут отцы форума?
Название: Маска ввода в input
Отправлено: covex1 от 28 Июня 2005, 09:41:25: Решение не претендовало на лавры "сестры таланта"
Название: Маска ввода в input
Отправлено: Меняздесьдавнонет от 28 Июня 2005, 09:48:15: он сабмит - некрасиво.
вроде бы, задача была сделать на лету.
Название: Маска ввода в input
Отправлено: Xander от 28 Июня 2005, 10:29:34: covex1
Скрипт подозрительно длинный. Проверь как следует, делает ли он именно то что нужно, всегда ли он это делает, и всегда ли правильно. По себе знаю, что неприятно вводить данные, если их формат чересчур строг и неочевиден.
Название: Маска ввода в input
Отправлено: covex1 от 28 Июня 2005, 10:58:30: Вроде посмотрел результат. Пускает только одни цифры, результирующий вид получается строго по шаблону, передает значение поле вместе с шаблоном.
Скрипт найден на http://javascript.internet.com/forms/dfilter.html

Самого напрягло размерность ну и "вес" около 2 кб. Но клиент хочет видеть как надо нужную строчку, когда ее заполняет.
Ввиду того что java script для меня темный лес, это единственное решение которое нашел на просторах инета.
Название: Маска ввода в input
Отправлено: Xander от 28 Июня 2005, 12:02:05: а он телефоны типа (01234)19-15-20 нормально воспринимает?
Название: Маска ввода в input
Отправлено: covex1 от 28 Июня 2005, 12:22:31: Как маску сделаешь так и будет воспринимать
Название: Маска ввода в input
Отправлено: Xander от 28 Июня 2005, 12:23:26: CGVictor
Если умеешь - напиши регексп, а?

Я что-то начал пробовать, да не выходит:

Говорит - false. В чем затык - в упор не понимаю.
Название: Маска ввода в input
Отправлено: Xander от 28 Июня 2005, 12:29:43: covex1
это я к тому, что в общем случае (###)###-##-## - негодная маска. Ну, дело твое.
Название: Маска ввода в input
Отправлено: covex1 от 28 Июня 2005, 12:30:04: Стараюсь обходить регулярные выражения. Осознаю, что вешь крайне полезная, но порой времени на написание даже простого регулярного выражения уходит неоправданно много. Где есть какая-то возможность, обхожусь без них.
Название: Маска ввода в input
Отправлено: Xander от 28 Июня 2005, 12:33:11: У меня редко больше, чем минут пять-десять уходит. Но вот вишь ты - нашла коса на камень. Что-то отличается в реализации регекспов в JavaScript. А что - непонятно.
Название: Маска ввода в input
Отправлено: covex1 от 28 Июня 2005, 12:45:16: Под PHP могу сварганить.
Название: Маска ввода в input
Отправлено: Xander от 28 Июня 2005, 12:48:32: Я считаю, что данные лучше проверять сразу при вводе. Но почему-то на большинстве сайтов они проверяются только на сервере.
Название: Маска ввода в input
Отправлено: covex1 от 28 Июня 2005, 12:54:53: Я тоже так считаю. Но все проверяют на сервере, наверное по причине сложности написания корректного ява скрипта. Еще раз повторюсь что с явой ни какие отношения не поддерживаю, но зато на PHP я могу разобрать порой сложные входные данные ну и делать с ними что угодно.

Обещанный код на PHP. Может поможет.

$num="(095)123-45";

if (ereg("([0-9]{1,5})[0-9]{1,3}-[0-9]{1,5}",$num))
{echo "yes";}
else{echo "no";}
?>
Название: Маска ввода в input
Отправлено: commander от 28 Июня 2005, 13:28:25: Xander
Цитировать
Если умеешь - напиши регексп, а?
Название: Маска ввода в input
Отправлено: commander от 28 Июня 2005, 13:42:11: covex1
если надо делать так:
Цитировать
он сабмит - некрасиво.
вроде бы, задача была сделать на лету.

то лови каждое изменение и в зависимости от введенного символа ругайся или не ругайся...
хотя ИХМО это лишнее...
Название: Маска ввода в input
Отправлено: covex1 от 28 Июня 2005, 13:42:36: Xander

Нужна визуальная наглядность при вводе. Что бы чел забивал цифры, а к ним в реальном времени применялся визуальный шаблон.

Ввел 0
В строке (0
Ввел 09
В строке (09
Ввел 095
В строке (095)
Ввел 0951
В строке (095)1
Ввел 09512
В строке (095)12
и т.д
Название: Маска ввода в input
Отправлено: commander от 28 Июня 2005, 13:52:49: covex1
сейчас чайку попью... - напишу...
Название: Маска ввода в input
Отправлено: commander от 28 Июня 2005, 14:12:20: итак пример для размышлений на тему:

test phone
Название: Маска ввода в input
Отправлено: covex1 от 28 Июня 2005, 14:28:50: Цитировать
commander:
итак пример для размышлений на тему:

Cупер. И наглядно и понятно. Только если начинаешь удалять Backspacе\'ом, затыкается на скобка или любом другом знаке всавленным скриптом. А так удачно получилось.
Название: Маска ввода в input
Отправлено: Xander от 28 Июня 2005, 14:49:10: covex1
Еще раз: есть вероятность, что на сайте будут вводиться не московские телефоны? Если нет, то все клево. А если есть, то надо делать по-другому.
Название: Маска ввода в input
Отправлено: covex1 от 28 Июня 2005, 14:55:48: Будем считать, что все "клево". Префиксы воодится будут от сотовых операторов, а это обычно 3 знака.
Клевый скрипт получился: и короткий и рабочий.