效果
全部代码,粘贴可用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#comment textarea{height:100px;}
#comment p span{color:red;}
</style>
<script src="js/jquery-1.7.1.min.js" ></script>
</head>
<body>
<div id="comment">
<textarea></textarea>
<p>你还可以输入<span>300</span>个字</p>
</div>
<script>
$(function(){
$(‘ #comment textarea ‘).keyup(function(){
//输入字符后键盘up时触发事件
var txtLeng = $(‘ #comment textarea ‘).val().length; //把输入字符的长度赋给txtLeng
//拿输入的值做判断
if( txtLeng>300 ){
//输入长度大于300时span显示0
$(‘ #comment p span ‘).text(‘ 0 ‘);
//截取输入内容的前300个字符,赋给fontsize
var fontsize = $(‘#comment textarea‘).val().substring(0,300);
//显示到textarea上
$(‘ #comment textarea ‘).val( fontsize );
}else{
//输入长度小于300时span显示300减去长度
$(‘#comment p span‘).text(300-txtLeng);
}
});
});
</script>
</body>
</html>
版权声明:本文为博主原创文章,未经博主允许不得转载。