jQuery控制文本框字数

最新推荐文章于 2023-04-19 16:10:37 发布

原创最新推荐文章于 2023-04-19 16:10:37 发布 · 334 阅读

CC 4.0 BY-SA版权

本文介绍了一个使用HTML和JavaScript实现的文本输入长度限制功能。通过具体的代码示例展示了如何为文本区域设置最大字符数，并实时更新剩余可输入字符数。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
.donc-add-region{
margin-top: 18px;
display: flex;
align-items: center;
color: #b8b8b8;
}
.donc-add-title{
font-size: 14px;
color: #666666;
width: 100px;
}
.donc-add-tarea{
height: 70px;
width: 100%;
border: 1px solid #d9d9d9;
border-radius: 3px;
position: relative;
color: #b2b2b2;
}
.donc-add-tarea textarea{
border: none;
margin: 5px;
resize: none;
width: 95%;
line-height: 20px;
font-size: 13px;
/*color: #333;*/
overflow: hidden;
}
.donc-add-maxlength{
position: absolute;
bottom: 8px;
font-size: 10px;
color: #b2b2b2;
right: 8px;
}
</style>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script>
// 计数
function checkWord(me){
// 最大数
var wordCheck = $(me).parent().find(".wordCheck").text();

// 当前值
var str = $(me).val();
// var surplus = parseInt(wordCheck)-parseInt(str.length);
if (str.length>=20) {
str.substring(0, 1);
}
$(me).parent().find(".surplus").text(str.length);
}

</script>
</head>
<body>
<div class="donc-add-region">
<span class="donc-add-title">标题： </span>
<div class="donc-add-tarea addTitle">
<textarea class="donaTitle" maxlength="20" placeholder="标题" onKeyUp="javascript:checkWord(this);" onMouseDown="javascript:checkWord(this);"></textarea>
<p class="donc-add-maxlength"><span class="surplus">0</span>/<span class="wordCheck">20</span></p>
</div>
</div>
<div class="donc-add-region">
<span class="donc-add-title">内容： </span>
<div class="donc-add-tarea addContent">
<textarea class="donaCont" maxlength="200" placeholder="内容" onKeyUp="javascript:checkWord(this);" onMouseDown="javascript:checkWord(this);"></textarea>
<p class="donc-add-maxlength"><span class="surplus">0</span>/<span class="wordCheck">200</span></p>
</div>
</div>
</body>
</html>