用jquery监听输入数字的变化

最新推荐文章于 2024-07-14 03:31:36 发布

AsaZyf

最新推荐文章于 2024-07-14 03:31:36 发布

阅读量353

点赞数

CC 4.0 BY-SA版权

文章标签： jquery keyup 限定数字

本文链接：https://blog.youkuaiyun.com/AsaZyf/article/details/79792124

jQuery初级专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的文本输入框功能，该功能能够实时显示剩余可输入字符数量，并阻止用户输入超过预设的最大字符限制（300个字符）。通过简单的HTML结构配合JavaScript代码，实现了用户体验友好的输入限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<style>
#text{resize: none;outline: none;}
</style>
</head>
<body>
<textarea id="text"></textarea>
<p>只可以输入<em>300个字</em></p>
<script>
//监听输入数字的变化
$("#text").keyup(function(){
var oText=$("#text").val().length
$("em").text(300-oText+"个字")
})

//升级版超出限定字数无法输入
$("#text").keyup(function(){
var len=$(this).val().length
if(300-len<0){
var oText=$(this).val().substring(0,300)
$(this).val(oText)
}else{
$("em").text(300-len)
}
})
</script>
</body>
</html>