用jquery监听输入数字的变化

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

原创最新推荐文章于 2024-07-14 03:31:36 发布 · 382 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #keyup #限定数字

jQuery初级专栏收录该内容

11 篇文章

订阅专栏

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

<!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>