📅 最后修改于: 2023-12-03 15:32:12.299000 🧑 作者: Mango
keyup() 是 jQuery 中的一个方法，用于指定当用户释放按键后，需要执行的动作。这个方法可以用于 input、textarea 等标签，监听用户在这些标签中输入的内容。例如，可以使用 keyup() 来实现实时搜索功能或动态计算字符数等。
$(selector).keyup(function)
selector：必需，用于指定要绑定 keyup 事件的元素。function：必需，用于指定当用户释放按键后要执行的函数。keyup() 方法接受一个函数作为参数。这个函数将在用户释放按键时被调用，同时也会将一个事件对象作为参数传递给该函数。
事件对象的常用属性：
keyCode：表示按下的字符的 ASCII 码值。shiftKey：表示 Shift 键是否被按下。ctrlKey：表示 Ctrl 键是否被按下。altKey：表示 Alt 键是否被按下。<!DOCTYPE html>
<html>
<head>
<title>实时搜索</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h1>实时搜索</h1>
<input type="text" id="search-box" placeholder="请输入搜索内容">
<ul id="search-result"></ul>
<script>
$('#search-box').keyup(function(event) {
// 获取用户输入的搜索关键词
var keyword = $(this).val();
// 如果关键词为空，则清空搜索结果
if (keyword === '') {
$('#search-result').empty();
return;
}
// 模拟搜索结果
var data = [
{title: 'JavaScript is the best programming language'},
{title: 'How to learn JavaScript quickly'},
{title: '10 JavaScript tricks every developer should know'},
{title: 'Build a real-time chat app with JavaScript and Node.js'}
];
// 显示搜索结果
var resultHtml = '';
for (var i = 0; i < data.length; i++) {
var item = data[i];
if (item.title.indexOf(keyword) !== -1) {
resultHtml += '<li>' + item.title + '</li>';
}
}
$('#search-result').html(resultHtml);
});
</script>
</body>
</html>
这个示例演示了如何使用 keyup() 来实现实时搜索功能。当用户输入关键词后，会立即搜索数据并将搜索结果显示在页面上。如果搜索框为空，则清空搜索结果。
<!DOCTYPE html>
<html>
<head>
<title>动态计算字符数</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h1>动态计算字符数</h1>
<textarea id="text-box" placeholder="请输入文本内容"></textarea>
<p id="char-count"></p>
<script>
$('#text-box').keyup(function(event) {
// 获取用户输入的文本内容
var content = $(this).val();
// 计算字符数
var charCount = content.length;
// 显示字符数
$('#char-count').text('字符数：' + charCount);
});
</script>
</body>
</html>
这个示例演示了如何使用 keyup() 来动态计算字符数。当用户在文本框中输入文本时，会立即计算字符数并显示在页面上。