我想做个类似腾讯微博那种判断字数的demo,现在键盘输入都可以获取字数了,但是鼠标右键菜单中剪切和粘贴文本域中的内容不知道要怎么处理,用body的mousedown也不行,还必须事后单击下鼠标按键才能执行,请大家指点一下。。。
<html>
<head>
<title>测试</title>
<script src="jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(function() {
$("#content").keyup(check);
$("body").mousedown(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>
</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>
</body>
</html>
<head>
<title>测试</title>
<script src="jquery-1.7.2.js" type="text/javascript"></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>
</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>
</body>
</html>
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。