Ввод даты, времени, IP-адреса и т. д. на веб-странице требует определенных ограничений формата, иначе программе будет сложно взаимодействовать с программой. Недавно я создал программу, в которой необходимо использовать этот аспект. Я нашел соответствующую программу. в Интернете, но использование Все они звучат очень плохо, поэтому мне пришлось реализовать это самому.
Сначала реализуйте две функции для управления курсором:
Скопируйте код кода следующим образом:
// Получаем текущую позицию курсора элемента управления текстовым полем
функция getPos (объект)
{
объект.фокус();
вар 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 = ложь;
Затем обработайте соответствующие сообщения клавиатуры, которые необходимо обработать.
Просто обработайте здесь несколько необходимых вещей, поскольку само текстовое поле не требует слишком большого количества пользовательских операций, поэтому перемещайте курсор вперед, назад и удаляйте операции, чтобы ваше текстовое поле имело базовые функции. Теперь работа выполняется очень плавно. .
Скопируйте код кода следующим образом:
// Обрабатываем кнопку самостоятельно
переключатель (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 = стртекст;
}
Наконец переместите курсор в нужное место.
// перемещаем курсор
setCursor (objTextBox, nCursorPos);
Заканчивать!
Основная цель — заменить системные сообщения клавиатуры вашей собственной обработкой и заблокировать системные сообщения, чтобы вы могли получить максимальный контроль.
Таким образом рождается TEXTBOX, ограничивающий формат указанного регулярного выражения.
Скопируйте код кода следующим образом:
//Управление представлением OBJ на основе указанного регулярного выражения
маска функции (objTextBox, маска)
{
//маска
expMask = новый RegExp(маска);
//Текст в текущем текстовом поле
вар strText =objTextBox.value;
// длина текста
var nTextLen=strText.length;
//Текущая позиция курсора
вар nCursorPos = getPos (objTextBox);
//нажатый код клавиши
вар nKeyCode = window.event.keyCode;
если (nKeyCode > 95) nKeyCode -= (95-47);
// Печать традиционной обработки
window.event.returnvalue = ложь;
// Обрабатываем кнопку самостоятельно
переключатель (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 = стртекст;
}
// перемещаем курсор
setCursor (objTextBox, nCursorPos);
}
// Получаем текущую позицию курсора элемента управления текстовым полем
функция getPos (объект)
{
объект.фокус();
вар 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('символ',число);
диапазон.выбрать();
}
Как использовать:
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})$')>