<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
</style>
</head>
<body>
<form>
<table border="0" cellpadding="0" cellspacing="0" width="500px;">
<tr>
<td align="right">
<textarea id="content" cols="50" rows="10" style="overflow: auto;"></textarea>
</td>
</tr>
<tr>
<td align="right">
<div style="vertical-align: bottom; height: 20px; line-height: 20px; margin: 0px; color: Gray;">
<label id="info2" style="float: right; font-size: 12px;">个字</label>
<span id="info" style="float: right; font-size: 20px; font-weight: bold;">140</span>
<label id="info1" style="float: right; font-size: 12px;">还能输入</label>
</div>
</td>
</tr>
</table>
</form>
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
$("#content").keyup(check);
$("#content").onpaste(check); //粘贴文本时执行
});
function check() {
var str = $("#content").val();
var len = strlen(str);
var info = 140 - len;
info = info + "";
if (info.indexOf('.') > 0)
info = info.substring(0, info.indexOf('.'));
if (len <= 140) {
$("#info1").html("还能输入");
$("#info").css('color', 'gray');
$("#info").html(info);
} else {
info = info.substr(1)
$("#info1").html("超出");
$("#info").css('color', 'red');
$("#info").html(info);
}
}
function trim(str) {
return (str + '').replace(/(\s+)$/g, '').replace(/^\s+/g, '');
}
function strlen(str) {
var str = trim(str);
var len = 0;
for (var i = 0; i < str.length; i++) {
len += str.charCodeAt(i) > 0 && str.charCodeAt(i) < 255 ? 0.5 : 1;
}
return len;
}
</script>
</body>
</html>
textarea验证字数
最新推荐文章于 2022-03-24 11:16:14 发布