textare 显示剩余输入字数 jquery

最新推荐文章于 2019-01-18 09:33:37 发布

qq_36645155

最新推荐文章于 2019-01-18 09:33:37 发布

阅读量383

点赞数

分类专栏： jquery

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>显示剩余字符串字数</title>
	<link rel="stylesheet" type="text/css" href="./scss/style.css">
</head>
<body>
	<textarea></textarea>
	<div class="remaining">剩余字符数：<span class="count">300</span></div>
</body>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
//对于找到的每一个remaining元素
$('.remaining').each(function(){
	//查找并储存读出的技术和相关的文本区域/输入字段
	var $count = $('.count',this);
	var $input = $(this).prev();

	//.text()返回的是一个字符串，乘以1将得到一个数字（用于计算）
	var maximumCount = $count.text()*1;

	//在keyup /paster input 事件三调用更新函数
	var update = function(){

		var before = $count.text() * 1;
		var now = maximumCount - $input.val().length;

		//检查确保用户没用超过限制
		if (now < 0) {
			var str = $input.val();
			$input.val(str.substr(0,maximumCount));
			now = 0;
		}

		//只在必要时修改dom
		if (before != now) {
			$count.text(now);
		}
	};

	//监听change事件
	$input.bind('input keyup paste',function(){
		setTimeout(update,0)
	});

	/**
	 * input paste 考虑用户复制粘贴的情况
	 * textare拥有焦点时，调用倒计时函数，把更新函数放在调用栈最后，确保在浏览器添加文本后才触发
	 */

	//在开始时调用update，防止输入域预先填写
	update();
}); //结束each();遍历
</script>
</html>