jQuery实时计算用户输入字数特效代码下载

jQuery实时计算用户输入字数特效代码下载

1. 引入JS

<script src="js/jquery-1.8.3.min.js"></script>

2. HTML代码

<!-- 页面内容 -->
<h3><center>实时计算用户输入字数</center></h3>
<div class='textarea-wrapper'>
	<div class='textarea-block'>
		<textarea class="textarea-item" name="content" placeholder="请输入内容,不超过300字。" maxlength="300" spellcheck="false"></textarea>
		<div class="textarea-count">
			<span class="textareaInput">0</span>/<span class="textareaTotal">300</span>
		</div>
	</div>
	<button class='textarea-btn' disabled="">提交</button>
</div>
<script>
	$(document).ready(function(){
		var lenInput = $('.textarea-item').val().length;
		$(".textarea-item").keyup(function(){
			lenInput = $(this).val().length;
			if(lenInput>0 && lenInput<=300){
				$('.textareaInput').html(lenInput);
				$('.textarea-btn').attr('disabled',false);
			}else{
				$('.textarea-btn').attr('disabled',true);
			}
		});
	});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

用户评论

18素材网

一个让开发更高效的素材分享平台,用于快速开发强大的Web界面。


官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:864918708
Css3+Html5讨论群
群号:864918708

加群请备注:从官网了解到