jQuery实现textarea输入字数限制功能
作者:清欢时间:2026-10-23 01:34:54浏览:478
本文介绍如何使用jQuery实现textarea输入框的字数限制功能。通过监听input事件,动态计算已输入字符数并与最大允许值比较,实时显示剩余字数。示例包含HTML结构、CSS样式及核心JavaScript逻辑,适用于需要控制用户输入长度的场景。
jQuery实现textarea字数限制示例
本文将演示如何利用jQuery实现textarea输入框的字数限制功能。文中提供了具体的代码示例供参考,若发现任何错误,欢迎指正,以便共同学习进步。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>textarea 限制字数</title>
<style>
.container{
position: relative;
width: 730px;
}
.container span{
position: absolute;
bottom: 20px;
right: 30px;
}
</style>
</head>
<body>
<div class="container">
<textarea name="content" id="content" cols="100" rows="10"></textarea>
<span>0/10</span>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>
$(function(){
/**
* textarea 限制输入字数
* @param string str 类名或ID
* @param number num 限制输入的字数
*/
function limitImport(str,num){
$(document).on('input propertychange',str,function(){
var self = $(this);
var content = self.val();
if (content.length > num){
self.val(content.substring(0,num));
}
self.siblings('span').text(self.val().length+'/'+num);
});
}
//用法示例
limitImport('#content',10);
})
</script>
</body>
</html>
以上就是本文的全部内容,希望能为您的学习提供有益的帮助,同时也欢迎大家继续支持本站。
作者最新文章
JS转整数出现NaN怎么办?常见异常处理方案
2026-11-05 16:27:31
推荐几款免安装的在线JS压缩工具
2026-11-05 14:54:53
JS怎么使用JSON.stringify实现JSON格式化与缩进
2026-11-04 10:47:30
CodePen、JSFiddle 与 StackBlitz:主流 JS 在线编辑器对比
2026-11-03 21:07:49
JS字符串转数字后怎么正确判断是否为有效数值
2026-11-03 20:04:15
