Помогите!!! Нужна маска ввода
Кто-нибудь такое видел для HTML? Очень надо!
Можно ли сделать маску ввода в HTML на поле input? Ну скажем для номера телефона с префиксом (xxx) xxx-xx-xx
Кто-нибудь такое видел для HTML? Очень надо!
Маску можно сделать, проверяя каждый символ по событию onChange. Соответственно, в нужном месте втыкать "-".
Маску можно сделать, проверяя каждый символ по событию onChange. Соответственно, в нужном месте втыкать "-".
Совсем не знаю javascript. Если не затруднит можешь дать пример, или ссылку где такое видел.
Совсем не знаю javascript. Если не затруднит можешь дать пример, или ссылку где такое видел.
Да я не видел. Просто нужно немного мозгами раскидать... Я-то сейчас на другую тему мозгами расбрасываюсь. Если не придумаешь, то может быть что-нибудь нарисую к утру завтрему после работы...
Да я не видел. Просто нужно немного мозгами раскидать... Я-то сейчас на другую тему мозгами расбрасываюсь. Если не придумаешь, то может быть что-нибудь нарисую к утру завтрему после работы...
Было суперски, т.к. я ничего на эту тему не смогу придумать. Для меня это все равно что начать строить стартовую площадку для ракет. Ни в том ни в другом случае я не рублю "фишку".
Было суперски, т.к. я ничего на эту тему не смогу придумать. Для меня это все равно что начать строить стартовую площадку для ракет. Ни в том ни в другом случае я не рублю "фишку".
После затяжного перекура, руки дошли до сюда... :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
<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... Как-то не так...
Решение найдено:
<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;
}