HTML 통합 우아한 실시간 입력 정리 기능

2024-07-12

소개

안녕하세요 샤오저우 입니다.

방문하려면 클릭하세요 내 개인 블로그

현대 웹 디자인에서는 사용자 경험이 매우 중요합니다. 부드럽고 직관적이며 반응이 빠른 인터페이스는 사용자 만족도를 크게 높일 수 있습니다. 본 글에서는 실시간 입력삭제 기능을 웹폼에 통합하는 방법, 즉 입력창에 "x" 아이콘을 표시하여 사용자가 한 번의 클릭으로 입력창의 텍스트를 지울 수 있는 방법을 소개합니다. 인터페이스를 단순하고 아름답게 유지하면서 HTML, CSS 및 JavaScript를 사용하여 이 기능을 구현하겠습니다.

렌더링

여기에 이미지 설명을 삽입하세요.

HTML 구조

우리의 샘플 코드는 표준 입력 상자를 기반으로 하며 입력 상자 오른쪽에 명확한 아이콘을 포함시킵니다. 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

여기서 우리는<span>투명 아이콘을 감싸는 요소, 초기에 설정됨display: none;보이지 않게 만드세요.

CSS 스타일

입력 상자 오른쪽에 명확한 아이콘을 만들기 위해서는 CSS를 사용하여 아이콘의 위치를 지정하고 아름답게 해야 합니다. 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

이 코드는 입력 상자의 오른쪽 상단에 지우기 아이콘을 배치하고 전달합니다.transform속성은 세로 중앙에 배치됩니다.

자바스크립트 로직

입력 상자에 텍스트가 있을 때 지우기 아이콘이 표시되고 클릭하면 텍스트가 지워지도록 하려면 JavaScript를 사용하여 이벤트 리스너를 추가해야 합니다. 다음은 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

이 코드는 청취합니다input、focus그리고blur 입력창의 상태에 따라 클리어 아이콘을 표시하거나 숨기는 이벤트입니다. 지우기 아이콘을 클릭하면 입력 상자가 지워지고 아이콘이 다시 숨겨집니다.

요약하다

위의 단계를 통해 웹 양식에서 실용적이고 아름다운 실시간 입력 지우기 기능을 쉽게 구현할 수 있습니다. 이는 사용자 상호 작용의 편의성을 향상시킬 뿐만 아니라 전반적인 사용자 경험도 향상시킵니다. 이 기사가 귀하의 웹사이트나 애플리케이션의 사용자 인터페이스 디자인을 최적화하는 데 도움이 되기를 바랍니다.

기술나눔