Справочник функций

Ваш аккаунт

Войти через: 
Забыли пароль?
Регистрация
Информацию о новых материалах можно получать и без регистрации:

Почтовая рассылка

Подписчиков: -1
Последний выпуск: 19.06.2015

Помогите!!! Нужна маска ввода

428
27 июня 2005 года
covex
49 / / 20.06.2000
Можно ли сделать маску ввода в HTML на поле input? Ну скажем для номера телефона с префиксом (xxx) xxx-xx-xx
Кто-нибудь такое видел для HTML? Очень надо!
8
27 июня 2005 года
mfender
3.5K / / 15.06.2005
Цитата:
Originally posted by covex
Можно ли сделать маску ввода в HTML на поле input? Ну скажем для номера телефона с префиксом (xxx) xxx-xx-xx
Кто-нибудь такое видел для HTML? Очень надо!


Маску можно сделать, проверяя каждый символ по событию onChange. Соответственно, в нужном месте втыкать "-".

428
27 июня 2005 года
covex
49 / / 20.06.2000
Цитата:
Originally posted by mfender
Маску можно сделать, проверяя каждый символ по событию onChange. Соответственно, в нужном месте втыкать "-".



Совсем не знаю javascript. Если не затруднит можешь дать пример, или ссылку где такое видел.

8
27 июня 2005 года
mfender
3.5K / / 15.06.2005
Цитата:
Originally posted by covex
Совсем не знаю javascript. Если не затруднит можешь дать пример, или ссылку где такое видел.


Да я не видел. Просто нужно немного мозгами раскидать... Я-то сейчас на другую тему мозгами расбрасываюсь. Если не придумаешь, то может быть что-нибудь нарисую к утру завтрему после работы...

428
27 июня 2005 года
covex
49 / / 20.06.2000
Цитата:
Originally posted by mfender
Да я не видел. Просто нужно немного мозгами раскидать... Я-то сейчас на другую тему мозгами расбрасываюсь. Если не придумаешь, то может быть что-нибудь нарисую к утру завтрему после работы...


Было суперски, т.к. я ничего на эту тему не смогу придумать. Для меня это все равно что начать строить стартовую площадку для ракет. Ни в том ни в другом случае я не рублю "фишку".

8
28 июня 2005 года
mfender
3.5K / / 15.06.2005
Цитата:
Originally posted by covex
Было суперски, т.к. я ничего на эту тему не смогу придумать. Для меня это все равно что начать строить стартовую площадку для ракет. Ни в том ни в другом случае я не рублю "фишку".


После затяжного перекура, руки дошли до сюда... :D
Вобщем, раскидав мозгами, решил, что можно сделать так:
<input type="text" id="mask">
<script>
var mask = document.getElementById('mask');
var pat = 'xxx-xx-xx';
var reg = /[0-9]/;

function maskChange()
{
var curpos = mask.value.length;
var pch = pat.substr(curpos-1,1);
var re = reg.exec(mask.value.substr(curpos-1,1))
if(pch=='-') mask.value = mask.value.substr(0,curpos-1)+'-';
else if(pch=='x' && re) mask.value = mask.value.substr(0,curpos-1)+re;
else mask.value = mask.value.substr(0,curpos-1);
}
</script>

Немного некрасиво, но действенно. Есть еще полёт для фантазии :) Например сделать эту беду для KeyDown. но это - уже другой коленкор... да и трава другая нужна :D

8
28 июня 2005 года
mfender
3.5K / / 15.06.2005
Еще раз перекурив, обратил внимание на ТЗ... Там немного не так. Пришлось сделать еще менее красиво...

<input type="text" id="mask" onKeyUp="maskChange()">
<script>
var mask = document.getElementById('mask');
var pat = '(xxx) xxx-xx-xx';
var reg = /[0-9]/;

function maskChange()
{
var curpos = mask.value.length;
var pch = pat.substr(curpos-1,1);
var re = reg.exec(mask.value.substr(curpos-1,1));
if(pch=='-') mask.value = mask.value.substr(0,curpos-1)+'-';
else if(pch=='(') mask.value = mask.value.substr(0,curpos-1)+'(';
else if(pch==')') mask.value = mask.value.substr(0,curpos-1)+')';
else if(pch==' ') mask.value = mask.value.substr(0,curpos-1)+' ';
else if(pch=='x' && re) mask.value = mask.value.substr(0,curpos-1)+re;
else mask.value = mask.value.substr(0,curpos-1);
}
</script>

Хотя, если еще поперекуривать и мозги раскидать, то можно было бы совсем уж всё сделать регулярными выражениями... Но, как-то они странно выглядят в JavaScript... Как-то не так...
428
28 июня 2005 года
covex
49 / / 20.06.2000
Цитата:
.. Но, как-то они странно выглядят в JavaScript... Как-то не так...



Решение найдено:
<INPUT class='user' type='Text' maxlength='65' name='text' AUTOCOMPLETE='off' onKeyDown="java script:return dFilter (event.keyCode, this, '(###)###-##-##');">


Сам код javascript запиханный в файл mask.js:
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<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(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;
}

8
28 июня 2005 года
mfender
3.5K / / 15.06.2005
Вот это и есть тот самый KeyDown, для которого нужна другая трава :D
Реклама на сайте | Обмен ссылками | Ссылки | Экспорт (RSS) | Контакты
Добавить статью | Добавить исходник | Добавить хостинг-провайдера | Добавить сайт в каталог