HTML integrates elegant real-time input clearing function

HTML integrates elegant real-time input clearing

2024-07-12

introduction

Hello, I’m Xiao Zou.

In modern web design, user experience is crucial. A smooth, intuitive, and responsive interface can significantly improve user satisfaction. This article will show you how to integrate real-time input clearing into web forms, that is, displaying an "x" icon in the input box, allowing users to clear the text in the input box with one click. We will use HTML, CSS, and JavaScript to implement this feature while keeping the interface simple and beautiful.

Rendering

insert image description here

HTML Structure

Our sample code is based on a standard input box, and we will embed a clear icon to the right of the input box. Here is the basic structure of the HTML code:

<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

Here we used<span>Element to wrap the clear icon, initially setdisplay: none;Make it invisible.

CSS Styles

In order to make the clear icon on the right side of the input box, we need to use CSS to position and beautify this icon. The following is the CSS code:

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

This code positions the clear icon in the upper right corner of the input box andtransformAttributes are vertically centered.

JavaScript Logic

In order to make the clear icon appear when there is text in the input box and clear the text when clicked, we need to use JavaScript to add an event listener. Here is the JavaScript code:

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

This code listens forinput、focusandblurEvent, showing or hiding the clear icon according to the state of the input box. When the clear icon is clicked, the input box is cleared and the icon is hidden again.

Summarize

Through the above steps, we can easily implement a practical and beautiful real-time input clearing function in the web form. This not only improves the convenience of user interaction, but also enhances the overall user experience. I hope this article can help you optimize the user interface design of your own website or application.

Technology Sharing