HTML, CSS 및 jQuery를 사용하여 동적 텍스트 입력 상자 프롬프트를 만드는 방법
- 王林원래의
- 2023-10-24 09:16:491404검색
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
display: none;으로 설정했습니다. 마지막으로 jQuery를 사용하여 텍스트 입력 상자의 프롬프트 기능을 구현하는 일부 스크립트를 작성해야 합니다. script.js 파일에 다음 코드를 추가할 수 있습니다: rrreee
위 JavaScript 코드에서는 먼저$('#input').on('input', function() { ... }) 입력 상자의 입력 이벤트를 수신합니다. 사용자가 입력을 시작하면 입력 내용을 가져오고 해당 내용을 기반으로 권장 필터링 및 표시를 수행합니다. 실제 제안 콘텐츠 획득을 시뮬레이션하기 위해 타이머를 사용하고 일부 샘플 제안 콘텐츠를 정의했습니다. 사용자가 추천 콘텐츠의 항목을 클릭하면 선택한 항목의 콘텐츠가 입력 상자에 채워지고 추천 콘텐츠 목록이 숨겨집니다. 🎜🎜이 시점에서 동적 텍스트 입력 상자 프롬프트 구현이 완료되었습니다. HTML, CSS 및 jQuery의 조합을 통해 사용자가 입력할 때 실시간으로 일치하는 제안을 표시함으로써 사용자 경험을 향상시킬 수 있습니다. 🎜🎜이 문서가 HTML, CSS 및 jQuery를 사용하여 동적 텍스트 입력 상자 프롬프트를 만드는 방법을 이해하는 데 도움이 되기를 바라며 참조용 특정 코드 예제를 제공합니다. 웹 개발의 성공을 기원합니다! 🎜위 내용은 HTML, CSS 및 jQuery를 사용하여 동적 텍스트 입력 상자 프롬프트를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!