您的位置：首页 > Web前端 > JQuery

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

2015-07-20 14:37 721 查看

效果

全部代码，粘贴可用

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航