用jquery判断输入框还可以输入多少字

最新推荐文章于 2020-08-19 10:55:50 发布

CodingAlarm

最新推荐文章于 2020-08-19 10:55:50 发布

阅读量4.2k

点赞数 2

分类专栏： jquery实例文章标签： jquery 输入框 jquery还可输入多少字

本文链接：https://blog.csdn.net/CodingAlarm/article/details/46967999

版权

jquery实例专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果

全部代码，粘贴可用

<!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>