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 fiz um programa que precisava usar este aspecto. na Internet, mas usando Todos eles parecem muito ruins, então tive que implementar um sozinho.
Primeiro implemente duas funções para operar o cursor:
Copie o código do código da seguinte forma:
// Obtém a posição atual do cursor de um controle de caixa de texto
função 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 um controle de caixa de texto
function 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.
No onKeyDown, primeiro proteja o processamento de teclado padrão do sistema
Copie o código do código da seguinte forma:
//Selar o processamento tradicional
janela.event.returnvalue = falso;
Em seguida, 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. .
Copie o código do código da seguinte forma:
//Manipule o botão você mesmo
mudar(nKeyCode)
{
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.length;
}
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.
Copie o código do código da seguinte forma:
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.
Copie o código do código da seguinte forma:
//Controla a representação OBJ com base na expressão regular especificada
máscara de função(objTextBox,máscara)
{
//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-chave pressionado
var nKeyCode = window.event.keyCode;
if (nKeyCode > 95) nKeyCode -= (95-47);
//Selar o processamento tradicional
janela.event.returnvalue = falso;
//Manipule o botão você mesmo
mudar(nKeyCode)
{
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 um controle de caixa de texto
função 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 um controle de caixa de texto
função setCursor(obj,num){
range=obj.createTextRange();
intervalo.collapse(true);
range.moveStart('caractere',num);
intervalo.select();
}
Como usar:
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
Copie o código do código da seguinte forma:
<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
Copie o código do código da seguinte forma:
<nome de entrada=i_bip tipo=texto id=i_bip valor={I_BIP} maxlength=15 onkeydown=mask(i_bip, '^([0-9]{0,3}[/.][0-9]{0, 3}[/.][0-9]{0,3}[/.][0-9]{0,3})$')>