Este artigo descreve o método de exibição automaticamente da lista de sufixos da caixa de correio inserindo um nome de usuário pelo JS. Compartilhe para sua referência. Os detalhes são os seguintes:
A seguir, o código, salve -o no arquivo html a ser aberto:
Copie o código da seguinte forma: <! Doctype html>
<html>
<head>
<meta charset = "utf-8">
<Title> Digite o nome de usuário para exibir automaticamente a lista de sufixos da caixa de correio </ititure>
<script type = "text/javascript" src = "jQuery/jQuery-1.10.2.min.js"> </script>
<estilo>
*{margem: 0; preenchimento: 0;}
ul, li {estilo de lista: nenhum;}
.InputElem {Width: 198px; Hight: 22px; altura da linha: 22px; borda: 1px Solid #FF4455;}
.parentcls {width: 200px;}
.auto-tip li {width: 100%; altura: 22px; altura da linha: 22px; tamanho da fonte: 14px;}
.auto-tip li.hoverbg {background: #ddd; cursor: ponteiro;}
.red {cor: vermelho;}
.Hidden {Display: Nenhum;}
</style>
<script type = "text/javascript" src = "js/emailautocomplete.js"> </sCript>
</head>
<Body>
<div>
Por favor, insira o nome de usuário de e -mail abaixo:
<div>
<input type = "text">
</div>
</div>
</body>
</html>
O princípio é: quando eu inserir qualquer palavra, o prompt de email correspondente será retirado automaticamente. Quando eu entro 11 na caixa de entrada, a caixa suspensa terá todos os 11 e-mails inseridos. Quando inserir outros e -mails, haverá outros e -mails correspondentes a outra cópia.
Da mesma forma, esse plug-in não requer tags HTML. Requer apenas uma caixa de entrada para ter o nome da classe correspondente, o que está ok. O pai tem um nome de classe e nada mais é necessário. O código HTML interno é gerado automaticamente.
O código HTML é o seguinte:
Copie o código da seguinte forma: <div>
<input type = "text">
</div>
De fato, as tags DIV acima não precisam adicionar uma classe como acima à caixa de entrada de entrada e ao elemento pai (a personalização também é possível, mas quando a inicialização do JS, está tudo bem. Por padrão, a classe pai é chamada de parentcls, a classe de entrada atual é chamada de InfutElem, e a classe Hidden Field é chamada). Como pode haver várias caixas de entrada na página, é necessária uma classe pai para distinguir qual é a caixa de entrada e, é claro, é necessário um valor de armazenamento de domínio oculto para o fundo de desenvolvimento.
Existe um parâmetro de parâmetro de matriz de email no item de configuração: ["@qq.com", "@qq2.com", "@gmail.com", "@126.com", "@163.com", "@hotmail.com", "@yahoo.com", "@yahoo.com" .cn "." Caixas de correio.
As funções implementadas são as seguintes:
1. Suporta a operação para cima e para baixo do teclado e suporta clique no mouse e pressione Enter.
2. Ao clicar em documento, a caixa suspensa está oculta, exceto pela caixa de entrada de entrada atual. Quando a entrada é seguida, a correspondência automática e outras operações são implementadas.
Sem mencionar os detalhes, é semelhante à função de prompt de email automática ao se registrar online. Se houver bugs, você pode me deixar uma mensagem, para que não entre em detalhes!
O código CSS é o seguinte:
Copie o código da seguinte
*{margem: 0; preenchimento: 0;}
ul, li {estilo de lista: nenhum;}
.InputElem {Width: 198px; Hight: 22px; altura da linha: 22px; borda: 1px Solid #FF4455;}
.parentcls {width: 200px;}
.auto-tip li {width: 100%; altura: 22px; altura da linha: 22px; tamanho da fonte: 14px;}
.auto-tip li.hoverbg {background: #ddd; cursor: ponteiro;}
.red {cor: vermelho;}
.Hidden {Display: Nenhum;}
</style>
Clique aqui para baixar o código EmailAutocomplete.js.
Espero que este artigo seja útil para a programação JavaScript de todos.