A inserção de data, hora, endereço IP, etc. em uma página da web requer certas restrições de formato, caso contrário, será difícil para o programa se comunicar com o programa.
Recentemente, eu estava trabalhando em um programa que precisava usar esse aspecto. Encontrei programas correspondentes na Internet, mas eles eram muito complicados de usar, então tive que implementar um sozinho.
Primeiro implemente duas funções para operar o cursor:
// Obtém a posição atual do cursor de uma função de controle de caixa de texto getPos(obj)
{
obj.foco();
var workRange=document.selection.createRange();
obj.select();
var allRange=document.selection.createRange();
workRange.setEndPoint("StartToStart",allRange);
var len=workRange.text.length;
workRange.collapse(falso);
workRange.select();
retornar lente;
}
//Define a posição atual do cursor de uma função de controle de caixa de texto setCursor(obj,num){
range=obj.createTextRange();
intervalo.collapse(true);
range.moveStart('caractere',num);
intervalo.select();
}
A ideia principal da implementação da função principal é realizar algumas operações quando o teclado é pressionado, o que projetei no evento OnKeyDown.
Em OnKeyDown, primeiro proteja o processamento de teclado padrão do sistema
// sele o processamento tradicional window.event.returnValue = false
e depois processe as mensagens de teclado correspondentes que precisam ser processadas.
Basta processar algumas coisas necessárias aqui, porque a caixa de texto em si não requer muitas operações do usuário, então mova o cursor para frente, volte e exclua as operações, para que sua caixa de texto tenha funções básicas. .
// Lida com a troca de botão (nKeyCode) sozinho
{
case 8:// se a ação for backspace[<-]
{
strText = strText.substr(0,nCursorPos-1) + strText.substr(nCursorPos, nTextLen-nCursorPos);
nCursorPos--;
quebrar;
}
caso 46:// se a ação for del[del]
{
strText = strText.substr(0,nCursorPos) + strText.substr(nCursorPos+1,nTextLen-nCursorPos-1);
nCursorPos--;
quebrar;
}
case 38:// Se a ação for a tecla de direção [superior]
case 39:// Se a ação for a tecla de seta [direita]
{
nCursorPos++;
quebrar;
}
case 37:// Se a ação for a tecla de seta [esquerda]
case 40:// Se a ação for a tecla de direção [parte inferior]
{
nCursorPos--;
quebrar;
}
padrão :
{
strText = strText.substr(0,nCursorPos) + String.fromCharCode(nKeyCode) + strText.substr(nCursorPos,nTextLen);
nCursorPos++;
if (nCursorPos>strText.length)
{
nCursorPos=strText.comprimento;
}
quebrar;
}
}
Qualquer outra mensagem adicionará um caractere. Caracteres visíveis e invisíveis serão adicionados e o cursor voltará. Consulte a seção de tratamento padrão acima.
Em seguida, determine se a máscara está correta. Se estiver correta, a entrada é válida e a exibição do valor é adicionada à caixa de texto.
if (strText.match(expMask))
{
//O formato de entrada está correto objTextBox.value = strText;
}
Por fim, mova o cursor para o local apropriado.
//Move o cursor setCursor(objTextBox,nCursorPos);
Terminar!
O objetivo principal é substituir as mensagens do teclado do sistema pelo seu próprio processamento e bloquear as mensagens do sistema, para que você possa obter o máximo controle.
Desta forma, nasce um TEXTBOX que restringe o formato da expressão regular especificada.
Em anexo está o código completo:
// De acordo com a expressão regular especificada, controla a função de representação OBJ mask(objTextBox,mask)
{
//Máscara expMask = new RegExp(máscara);
//O texto na caixa de texto atual var strText =objTextBox.value;
// Comprimento do texto var nTextLen=strText.length;
// Posição atual do cursor var nCursorPos=getPos(objTextBox);
// Código da tecla pressionada var nKeyCode = window.event.keyCode;
if (nKeyCode > 95) nKeyCode -= (95-47);
// Selar o processamento tradicional window.event.returnValue = false;
// Lida com a chave de botão (nKeyCode) sozinho
{
case 8:// se a ação for backspace[<-]
{
strText = strText.substr(0,nCursorPos-1) + strText.substr(nCursorPos, nTextLen-nCursorPos);
nCursorPos--;
quebrar;
}
caso 46:// se a ação for del[del]
{
strText = strText.substr(0,nCursorPos) + strText.substr(nCursorPos+1,nTextLen-nCursorPos-1);
nCursorPos--;
quebrar;
}
case 38:// Se a ação for a tecla de direção [superior]
case 39:// Se a ação for a tecla de seta [direita]
{
nCursorPos++;
quebrar;
}
case 37:// Se a ação for a tecla de seta [esquerda]
case 40:// Se a ação for a tecla de direção [parte inferior]
{
nCursorPos--;
quebrar;
}
padrão :
{
strText = strText.substr(0,nCursorPos) + String.fromCharCode(nKeyCode) + strText.substr(nCursorPos,nTextLen);
nCursorPos++;
if (nCursorPos>strText.length)
{
nCursorPos=strText.comprimento;
}
quebrar;
}
}
if (strText.match(expMask))
{
//O formato de entrada está correto objTextBox.value = strText;
}
//Move o cursor setCursor(objTextBox,nCursorPos);
}
// Obtém a posição atual do cursor de uma função de controle de caixa de texto getPos(obj)
{
obj.foco();
var workRange=document.selection.createRange();
obj.select();
var allRange=document.selection.createRange();
workRange.setEndPoint("StartToStart",allRange);
var len=workRange.text.length;
workRange.collapse(falso);
workRange.select();
retornar lente;
}
// Define a posição atual do cursor de uma função de controle de caixa de texto setCursor(obj,num){
range=obj.createTextRange();
intervalo.collapse(true);
range.moveStart('caractere',num);
range.select();
}
Uso:
1. Defina o valor inicial de formato indefinido padrão. Por exemplo: o valor inicial do formato de data e hora é "//::", que significa (ano/mês/dia hora:minuto:segundo). O IP é "..." (192.168.0.1). Na verdade, basta definir um caractere que não viole a expressão regular.
2. Chame a função máscara no evento OnKeyDown da caixa TEXT do formulário. O parâmetro objTextBox é o nome da caixa de texto especificada. A máscara de parâmetro é uma máscara em formato de expressão regular.
Exemplo:
Para usar uma caixa de máscara de data e hora
<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}))$')">
Para usar a caixa de máscara 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})$')">