按键计数器(打印信件)和删除信件
按键计数器(打印信件)和删除信件
提问于 2020-01-17 12:46:22
大家好(我是西班牙人，请原谅我有语法或词汇错误)！我现在正在学习JS和Jquery。我的许多练习之一是输入文本，并实时计数按下的/书写的/键入的和删除的键。所以数数我写的键是很好的，问题是我不知道如何减去，如何检测你正在删除字母并减去它们。
这是计算按下的键的代码。但问题是删除。请救救我！)
<!DOCTYPE html>
<html lang='es'>
<head>
<meta charset='utf-8'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
i = 0;
$(document).ready(function(){
$("input").keypress(function(){
$("span").text(i += 1);
});
});
</script>
</head>
<body>
Type your text: <input type="textarea" width="500px" height="300px">
<p>Keys: <span>0</span></p>
</body>
</html>回答 6
Stack Overflow用户
回答已采纳
发布于 2020-01-17 13:12:48
虽然Syed的答案对于一个简单的方法来说已经足够了，但是它有一些缺点：
- 如果您保持后退空间，它将减少一个计数，即使您删除了整个内容。
- 您必须指定您不想触发计数的所有键列表(F1-F12，shift，.)，它有点长(但是，在您的代码版本中也出现了这个问题)。
您正在寻找的解决方案是一个简单的文本长度获取器时，一些变化。
i = 0;
$(document).ready(function(){
$("input").keyup(function(event){
i = $(event.target).val().length;
$("span").text(i);
});
});当我们在<input>上获取事件时，$(event.target)将直接允许我们访问<input>标记，从而允许我们获取内容(.val())并检索输入的文本的长度。
i变量不是必需的，但是如果您想在某个地方显示(添加了x字符)或(删除的x字符)，则可能会很有用。
Stack Overflow用户
发布于 2020-01-17 13:07:17
而不是你的选择，试试这个
function updateLength() {
$("span").text(this.value.length);
}
$('input').on('input', updateLength)如果你还想用你的方法，那就去试试
$('input').keyup(function(e) {
console.log(e.keyCode);
if(e.keyCode === 8 || event.keyCode === 46) {
console.log('u :', i);
i -= 1
if (i < 0) i = 0
$("span").text(i);
} else {
i += 1
$("span").text(i);
}
});但我认为上面的代码更干净。
Stack Overflow用户
发布于 2020-01-17 12:53:33
您可以通过键代码获得它，并减少计数。
注意：后台空间不会在keypress上触发，所以我使用了keyup。
i = 0;
$(document).ready(function(){
$("input").keyup(function(event){
switch (event.keyCode) {
case 8: // Backspace
case 46: // delete
$("span").text(i -= 1);
case 9: // Tab
case 13: // Enter
case 37: // Left
case 38: // Up
case 39: // Right
case 40: // Down
break;
default:
$("span").text(i += 1);
}
});
});<!DOCTYPE html>
<html lang='es'>
<head>
<meta charset='utf-8'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
Type your text: <input type="textarea" width="500px" height="300px">
<p>Keys: <span>0</span></p>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59787668
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号