码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-07-20 16:40:22      阅读:144      评论:0      收藏:0      [点我收藏+]

标签:jquery   输入框   jquery还可输入多少字   

效果

技术分享

全部代码,粘贴可用

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

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

标签:jquery   输入框   jquery还可输入多少字   

原文地址:http://blog.csdn.net/codingalarm/article/details/46967999

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!