HTML, CSS 및 jQuery를 사용하여 동적 텍스트 입력 상자 프롬프트를 만드는 방법-JS 튜토리얼-php.cn

HTML, CSS 및 jQuery를 사용하여 동적 텍스트 입력 상자 프롬프트를 만드는 방법

王林

풀어 주다： 2023-10-24 09:16:49

원래의

1491명이 탐색했습니다.

HTML, CSS 및 jQuery를 사용하여 동적 텍스트 입력 상자 프롬프트를 만드는 방법

웹 개발에서는 더 나은 사용자 경험을 제공하기 위해 동적 텍스트 입력 상자 프롬프트가 자주 사용됩니다. 가능한 입력 옵션을 실시간으로 표시함으로써 사용자가 올바른 콘텐츠를 빠르게 선택할 수 있도록 도울 수 있습니다. 이 문서에서는 HTML, CSS 및 jQuery를 사용하여 사용자의 대화형 경험을 개선하기 위한 동적 텍스트 입력 상자 프롬프트를 만드는 방법을 설명합니다.

이 기능을 구현하려면 HTML, CSS 및 jQuery가 필요합니다. 먼저 아래와 같이 간단한 HTML 구조를 만드는 것부터 시작합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态文本输入框提示</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <label for="input">请输入内容</label>
        <input type="text" id="input" autocomplete="off">
        <ul id="suggestions"></ul>
    </div>

    <script src="jquery.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

로그인 후 복사

위의 HTML 코드에서는 입력 상자와 추천 콘텐츠를 표시하는 정렬되지 않은 목록이 포함된 컨테이너를 만듭니다. 라벨을 추가함으로써 입력창과 관련된 프롬프트 정보를 제공할 수 있습니다.

다음으로 입력 상자와 추천 콘텐츠를 아름답게 만들기 위해 CSS 스타일을 작성해야 합니다. styles.css 파일에 다음 코드를 추가할 수 있습니다. styles.css文件中，我们可以添加以下代码：

.container {
    position: relative;
    width: 300px;
    margin: 0 auto;
    padding-top: 20px;
}

label {
    display: block;
    margin-bottom: 10px;
}

input[type="text"] {
    width: 100%;
    padding: 10px;
    font-size: 16px;
}

ul {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

ul li {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}

로그인 후 복사

在上面的CSS代码中，我们设置了整体的容器样式，并对输入框和建议内容进行了一些基本的样式定义。注意，我们设置了建议内容列表的显示状态为display: none;，以便在用户输入内容时动态显示。

最后，我们需要使用jQuery编写一些脚本来实现文本输入框的提示功能。在script.js文件中，我们可以添加以下代码：

$(document).ready(function() {
    $('#input').on('input', function() {
        var input = $(this).val().toLowerCase();
        
        if (input.length > 0) {
            $('#suggestions').empty().show();
            
            // 模拟异步获取建议内容
            setTimeout(function() {
                var suggestions = ['apple', 'banana', 'cherry', 'durian', 'elderberry', 'fig', 'grape', 'honeydew'];
                
                suggestions.forEach(function(item) {
                    if (item.indexOf(input) > -1) {
                        $('<li>').text(item).appendTo('#suggestions');
                    }
                });
            }, 300);
        } else {
            $('#suggestions').empty().hide();
        }
    });
    
    $('body').on('click', '#suggestions li', function() {
        var text = $(this).text();
        $('#input').val(text);
        $('#suggestions').empty().hide();
    });
});

로그인 후 복사

在上面的JavaScript代码中，我们首先通过$('#input').on('input', function() { ... })rrreee

위 CSS 코드에서는 전체 컨테이너 스타일을 설정하고 입력 상자 및 제안 콘텐츠 스타일 정의에 몇 가지 기본 변경 사항을 적용했습니다. . 사용자가 콘텐츠를 입력할 때 동적으로 표시될 수 있도록 추천 콘텐츠 목록의 표시 상태를 display: none;으로 설정했습니다.

마지막으로 jQuery를 사용하여 텍스트 입력 상자의 프롬프트 기능을 구현하는 일부 스크립트를 작성해야 합니다. script.js 파일에 다음 코드를 추가할 수 있습니다:

rrreee

위 JavaScript 코드에서는 먼저 $('#input').on('input', function() { ... }) 입력 상자의 입력 이벤트를 수신합니다. 사용자가 입력을 시작하면 입력 내용을 가져오고 해당 내용을 기반으로 권장 필터링 및 표시를 수행합니다. 실제 제안 콘텐츠 획득을 시뮬레이션하기 위해 타이머를 사용하고 일부 샘플 제안 콘텐츠를 정의했습니다.

사용자가 추천 콘텐츠의 항목을 클릭하면 선택한 항목의 콘텐츠가 입력 상자에 채워지고 추천 콘텐츠 목록이 숨겨집니다. 🎜🎜이 시점에서 동적 텍스트 입력 상자 프롬프트 구현이 완료되었습니다. HTML, CSS 및 jQuery의 조합을 통해 사용자가 입력할 때 실시간으로 일치하는 제안을 표시함으로써 사용자 경험을 향상시킬 수 있습니다. 🎜🎜이 문서가 HTML, CSS 및 jQuery를 사용하여 동적 텍스트 입력 상자 프롬프트를 만드는 방법을 이해하는 데 도움이 되기를 바라며 참조용 특정 코드 예제를 제공합니다. 웹 개발의 성공을 기원합니다! 🎜

위 내용은 HTML, CSS 및 jQuery를 사용하여 동적 텍스트 입력 상자 프롬프트를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!