Ввод даты, времени, IP-адреса и т. д. на веб-странице требует определенных ограничений формата, иначе программе будет сложно взаимодействовать с программой.
Недавно я работал над программой, которая должна была использовать этот аспект. Я нашел соответствующие программы в Интернете, но они были очень громоздкими в использовании, поэтому мне пришлось реализовать их самостоятельно.
Сначала реализуйте две функции для управления курсором:
// Получаем текущую позицию курсора функции управления текстовым полем getPos(obj)
{
объект.фокус();
вар workRange=document.selection.createRange();
объект.выбрать();
вар allRange=document.selection.createRange();
workRange.setEndPoint("StartToStart",allRange);
var len=workRange.text.length;
workRange.collapse(ложь);
рабочийДиапазон.выбрать();
вернуть Лен;
}
//Устанавливаем текущую позицию курсора функции управления текстовым полем setCursor(obj,num){
диапазон = obj.createTextRange();
диапазон.коллапс (истина);
range.moveStart('символ',число);
диапазон.выбрать();
}
Основная идея реализации основной функции — выполнение некоторых операций при нажатии клавиатуры, что я спроектировал в событии OnKeyDown.
В OnKeyDown сначала защитите системную обработку клавиатуры по умолчанию
// запечатайте традиционную обработку window.event.returnValue = false,
а затем обработайте соответствующие сообщения клавиатуры, которые необходимо обработать.
Просто обработайте здесь несколько необходимых вещей, поскольку само текстовое поле не требует слишком большого количества пользовательских операций, поэтому перемещайте курсор вперед, назад и удаляйте операции, чтобы ваше текстовое поле имело базовые функции. Теперь работа выполняется очень плавно. .
// Обработка переключения кнопки (nKeyCode) самостоятельно
{
регистр 8://, если действие — возврат на место[<-]
{
strText = strText.substr(0,nCursorPos-1) + strText.substr(nCursorPos, nTextLen-nCursorPos);
nCursorPos--;
перерыв;
}
case 46://, если действие — del[del]
{
strText = strText.substr(0,nCursorPos) + strText.substr(nCursorPos+1,nTextLen-nCursorPos-1);
nCursorPos--;
перерыв;
}
case 38:// Если действие — клавиша направления [верхняя]
case 39:// Если действие — клавиша со стрелкой [вправо]
{
нКурсорПос++;
перерыв;
}
case 37:// Если действие — клавиша со стрелкой [влево]
case 40:// Если действие — клавиша направления [внизу]
{
nCursorPos--;
перерыв;
}
по умолчанию :
{
strText = strText.substr(0,nCursorPos) + String.fromCharCode(nKeyCode) + strText.substr(nCursorPos,nTextLen);
нКурсорПос++;
если (nCursorPos>strText.length)
{
nCursorPos=strText.length;
}
перерыв;
}
}
Любое другое сообщение добавит символ. Будут добавлены видимые и невидимые символы, а курсор переместится назад. См. раздел обработки по умолчанию выше.
Затем определите, правильна ли маска. Если она правильна, ввод является допустимым, и в текстовое поле добавляется отображение значения.
если (strText.match(expMask))
{
//Формат ввода правильный objTextBox.value = strText;
}
Наконец переместите курсор в нужное место.
//Перемещаем курсор setCursor(objTextBox,nCursorPos);
Заканчивать!
Основная цель — заменить сообщения клавиатуры системы на свою собственную обработку и заблокировать сообщения системы, чтобы вы могли получить максимальный контроль.
Таким образом рождается TEXTBOX, ограничивающий формат указанного регулярного выражения.
Прилагается полный код:
// Согласно заданному регулярному выражению управляем функцией представления OBJ Mask(objTextBox,mask)
{
//Маска expMask = новый RegExp(маска);
//Текст в текущем текстовом поле var strText =objTextBox.value;
// Длина текста var nTextLen=strText.length;
// Текущая позиция курсора var nCursorPos=getPos(objTextBox);
// Код нажатой клавиши var nKeyCode = window.event.keyCode;
if (nKeyCode > 95) nKeyCode -= (95-47
// Запечатываем традиционную обработку window.event.returnValue = false;
// Обработка переключения кнопки (nKeyCode) самостоятельно
{
регистр 8://, если действие — возврат на место[<-]
{
strText = strText.substr(0,nCursorPos-1) + strText.substr(nCursorPos, nTextLen-nCursorPos);
nCursorPos--;
перерыв;
}
case 46://, если действие — del[del]
{
strText = strText.substr(0,nCursorPos) + strText.substr(nCursorPos+1,nTextLen-nCursorPos-1);
nCursorPos--;
перерыв;
}
case 38:// Если действие — клавиша направления [верхняя]
case 39:// Если действие — клавиша со стрелкой [вправо]
{
нКурсорПос++;
перерыв;
}
case 37:// Если действие — клавиша со стрелкой [влево]
case 40:// Если действие — клавиша направления [внизу]
{
nCursorPos--;
перерыв;
}
по умолчанию :
{
strText = strText.substr(0,nCursorPos) + String.fromCharCode(nKeyCode) + strText.substr(nCursorPos,nTextLen);
нКурсорПос++;
если (nCursorPos>strText.length)
{
nCursorPos=strText.length;
}
перерыв;
}
}
if (strText.match(expMask))
{
//Формат ввода правильный objTextBox.value = strText;
}
//Перемещаем курсор setCursor(objTextBox,nCursorPos);
}
// Получаем текущую позицию курсора функции управления текстовым полем getPos(obj)
{
объект.фокус();
вар workRange=document.selection.createRange();
объект.выбрать();
вар allRange=document.selection.createRange();
workRange.setEndPoint("StartToStart",allRange);
var len=workRange.text.length;
workRange.collapse(ложь);
рабочийДиапазон.выбрать();
вернуть Лен;
}
// Устанавливаем текущую позицию курсора функции управления текстовым полем setCursor(obj,num){
диапазон = obj.createTextRange();
диапазон.коллапс (истина);
range.moveStart('символ',число);
range.select();
}
Использование:
1. Установите начальное значение неопределенного формата по умолчанию. Например: начальное значение формата даты и времени — «//::», что означает (год/месяц/день час:минута:секунда). IP-адрес «...» (192.168.0.1). По сути, просто задайте символ, который не нарушает регулярное выражение.
2. Вызовите функцию маски в событии OnKeyDown поля ТЕКСТ формы. Параметр objTextBox — это имя указанного текстового поля. Маска параметра представляет собой маску в формате регулярного выражения.
Пример.
Использование поля маски даты и времени.
<input name="i_etmend" type="text" id="i_etmend" value="{I_ETMEND}" maxlength="19" onkeydown="mask(i_etmend, '^(([0-9]{0,4} )-([0-9]{0,2})-([0-9]{0,2}) ([0-9]{0,2}):([0-9]{0 ,2}):([0-9]{0,2}))$')">
Чтобы использовать поле маски IP
<input name="i_bip" type="text" id="i_bip" value="{I_BIP}" maxlength="15" onkeydown="mask(i_bip, '^([0-9]{0,3}[ .][0-9]{0,3}[.][0-9]{0,3}[.][0-9]{0,3})$')">