Compartir tecnología

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

introducción

Hola, soy Xiao Zou.

Haga clic para visitar mi blog personal

En el diseño web moderno, la experiencia del usuario es crucial. Una interfaz fluida, intuitiva y receptiva puede aumentar significativamente la satisfacción del usuario. Este artículo presentará cómo integrar la función de borrado de entrada en tiempo real en un formulario web, es decir, mostrar un icono "x" en el cuadro de entrada, lo que permite al usuario borrar el texto en el cuadro de entrada con un solo clic. Usaremos HTML, CSS y JavaScript para implementar esta funcionalidad manteniendo la interfaz simple y hermosa.

representaciones

estructura HTML

Nuestro código de muestra se basa en un cuadro de entrada estándar e incorporaremos un icono transparente en el lado derecho del cuadro de entrada. Aquí está la estructura básica del 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

Aquí usamos<span>Elemento para envolver el ícono de borrar, configurado inicialmentedisplay: none;Hazlo invisible.

estilos CSS

Para que el ícono esté claro ubicado en el lado derecho del cuadro de entrada, necesitamos usar CSS para posicionar y embellecer el ícono. Aquí está el 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 coloca el icono de borrar en la esquina superior derecha del cuadro de entrada y pasatransformLas propiedades están centradas verticalmente.

Lógica de JavaScript

Para que el ícono de borrar se muestre cuando hay texto en el cuadro de entrada y borre el texto cuando se hace clic, necesitamos usar JavaScript para agregar un detector de eventos. Aquí está el 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 escuchainput、focusyblur Evento que muestra u oculta el icono de borrar según el estado del cuadro de entrada. Cuando se hace clic en el icono de borrar, el cuadro de entrada se borra y el icono se oculta nuevamente.

Resumir

A través de los pasos anteriores, podemos implementar fácilmente una práctica y hermosa función de limpieza de entradas en tiempo real en formularios web. Esto no sólo mejora la comodidad de la interacción del usuario, sino que también mejora la experiencia general del usuario. Espero que este artículo le ayude a optimizar el diseño de la interfaz de usuario de su sitio web o aplicación.