Use o layout do bootstrap para adicionar um ícone limpo com um clique na caixa de entrada de entrada, como o ícone claro com um clique na caixa de entrada de nome de login e o ícone de olho pequeno que exibe a senha na caixa de entrada de senha, conforme mostrado na figura abaixo:
No entanto, ao colocar os ícones na caixa de entrada de entrada, esses pequenos ícones não podem obter eventos de cliques;
Então, a questão é: como esses pequenos ícones podem obter eventos de clique?
Não sei, mas posso usar uma maneira indireta de implementar essa função indiretamente .
*** O ponto principal é:
Solução: Adicione um elemento invisível à posição do ícone pequeno, e o tamanho do elemento cobre apenas o ícone pequeno, mas não há cor e borda de fundo; É equivalente a cobrir o pequeno ícone com uma colcha transparente;
Copie o código da seguinte forma: <div>
<i> <i> </i> </span>
<input type = "text" placeholder = "conta/número de celular/email" id = "nome de usuário">
<span style = "display: inline-block;"> </span> <-elemento pequeno do ícone->
<span style = "Display: Block Inline; borda: 1px vermelho sólido; largura: 30px; altura: 30px; posição: absoluto; direita: 2px; z-índice: 100; cursor: ponteiro;"> </span> <-elementos sobre o pequeno ícone->
</div>
Adicione eventos a esse elemento sobreposto ao pequeno ícone. A função do pequeno ícone é apenas exibir e ocultar conforme necessário;
Isso é indiretamente realizado. O efeito de clique do pequeno ícone é uma ótima solução? Obrigado pela sua leitura, e espero que isso possa ajudá -lo a resolver o problema sem problemas.
Se você ainda deseja aprender em profundidade, clique aqui para aprender e anexar dois tópicos interessantes a você: Bootstrap Learning Tutorial Bootstrap Tutorial Practical Tutorial