Compartilhamento de tecnologia

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

introdução

Olá, eu sou Xiao Zou.

Clique para visitar Meu blog pessoal

No web design moderno, a experiência do usuário é crucial. Uma interface suave, intuitiva e responsiva pode aumentar significativamente a satisfação do usuário. Este artigo irá apresentar como integrar a função de limpeza de entrada em tempo real em um formulário web, ou seja, exibir um ícone “x” na caixa de entrada, permitindo ao usuário limpar o texto na caixa de entrada com um clique. Usaremos HTML, CSS e JavaScript para implementar essa funcionalidade, mantendo a interface simples e bonita.

renderizações

Estrutura HTML

Nosso código de amostra é baseado em uma caixa de entrada padrão e incorporaremos um ícone claro no lado direito da caixa de entrada. Aqui está a estrutura básica do código HTML:

<div class="field m-mobile-wide m-margin-bottom-small" style="padding-top: 10px">
    <div class="ui left icon input">
        <i class="qq icon"></i>
        <input type="text" id="QQ" name="qq" placeholder="输入QQ号自动获取昵称头像" required="required">
        <span class="clear-input" style="display: none;">
            <i class="fa fa-times-circle"></i>
        </span>
    </div>
</div>
1
2
3
4
5
6
7
8
9

Aqui usamos<span>Elemento para envolver o ícone de limpeza, definido inicialmentedisplay: none;Torne-o invisível.

Estilos CSS

Para deixar o ícone claro localizado no lado direito da caixa de entrada, precisamos usar CSS para posicionar e embelezar o ícone. Aqui está o código CSS:

.clear-input {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    display: none; /* 默认隐藏 */
}
1
2
3
4
5
6
7
8

Este código posiciona o ícone limpar no canto superior direito da caixa de entrada e passatransformAs propriedades são centralizadas verticalmente.

Lógica JavaScript

Para que o ícone limpar seja exibido quando houver texto na caixa de entrada e limpe o texto quando clicado, precisamos usar JavaScript para adicionar um ouvinte de evento. Aqui está o código JavaScript:

document.addEventListener('DOMContentLoaded', function () {
    const inputs = document.querySelectorAll('.ui.left.icon.input input');
    const clearSpans = document.querySelectorAll('.ui.left.icon.input .clear-input');
    
    inputs.forEach((input, index) => {
        // 检查输入框是否非空，如果是，则显示清除图标
        if (input.value) {
            clearSpans[index].style.display = 'block';
        }
        
        // 当输入框内容改变时，显示或隐藏清除图标
        input.addEventListener('input', function () {
            if (this.value) {
                clearSpans[index].style.display = 'block';
            } else {
                clearSpans[index].style.display = 'none';
            }
        });
        
        // 当输入框获得焦点时，如果已有内容，显示清除图标
        input.addEventListener('focus', function () {
            if (this.value) {
                clearSpans[index].style.display = 'block';
            }
        });
        
        // 当输入框失去焦点且为空时，隐藏清除图标
        input.addEventListener('blur', function () {
            if (!this.value) {
                clearSpans[index].style.display = 'none';
            }
        });
        
        // 当点击清除图标时，清空输入框并隐藏图标
        clearSpans[index].addEventListener('click', function (event) {
            event.stopPropagation();
            input.value = '';
            clearSpans[index].style.display = 'none';
        });
    });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

Este código escutainput、focuseblur Evento que mostra ou oculta o ícone de limpeza com base no estado da caixa de entrada. Quando o ícone limpar é clicado, a caixa de entrada é limpa e o ícone fica oculto novamente.

Resumir

Através das etapas acima, podemos implementar facilmente uma função prática e bonita de compensação de entrada em tempo real em formulários da web. Isso não apenas melhora a conveniência da interação do usuário, mas também melhora a experiência geral do usuário. Espero que este artigo ajude você a otimizar o design da interface do usuário do seu site ou aplicativo.