<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery-实时计算用户输入的字数</title>
<script type="text/javascript" src="js/vendor/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
$("#content").keyup(function(){
var length = 100;
var content_len = $("#content").val().length;
var in_len = length-content_len;
// 当用户输入的字数大于制定的数时，让提交按钮失效
// 小于制定的字数，就可以提交
if(in_len >=0){
$("#result").html('您还可以输入'+in_len+'字');
$("#btn").attr("disabled",false);
// 可以继续执行其他操作
}else{
$("#result").html('您还可以输入'+in_len+'字');
$("#btn").attr("disabled",true);
return false;
}
});
});
</script>
</head>
<body>
<div id="result">您还可以输入100字</div>
<textarea name="content" id="content" cols="80" rows="5"></textarea><br />
<input type="button" name="btn" value="提交" id="btn" />
</body>
</html>
网友评论