js提示当前输入框剩余可输入字符数|三体教程
文章目录

js提示当前输入框剩余可输入字符数

在某些博客网站,当我们发表文章的时候,文本框下面就会出现“已输入多少字符、还剩余多少字符可输入”的提示。

今天在百度知道里面,又看到有人在问如何才能实现这样的功能。

所以小编今天,就来分享一下“使用js提示当前输入的字符数以及剩余可输入字符数”的代码。

首先我们得有一个文本输入框。

html代码<textarea type="text" name="articletitle" id="articletitle" onkeyup="CheckChar(this.id,'chartitle');" maxlength="5" /></textarea>
还剩<span id="chartitle" class="red">10</span>字符

接下来就是一段很少的js代码了。

javascript代码<script>
function CheckChar(obj,mark){
	var obj=document.getElementById(obj);
	var mark=document.getElementById(mark);
	var maxlength=obj.maxLength;
	var inputlen=obj.value.length;
	if (inputlen<maxlength){
		mark.innerHTML=maxlength-inputlen;
	}else{
		mark.innerHTML="0"
	}
}
</script>

当然也可以用jquery来完成上面的功能,不过需要将onkeyup="CheckChar(this.id,'chartitle');"这一句去掉。

javascript代码<script>
$("#articletitle").keyup(function(){
	var maxlength=$(this).attr("maxlength");
	var inputlen=$(this).val().length;
	if (inputlen<maxlength){
		$("#chartitle").html(maxlength-inputlen);
	}else{
		$("#chartitle").html(0);
	}
});
</script>

亲自测试一下

在这篇文章中小编用的是textarea,如果小伙们用input text文本框,代码也是一样的。

本文网址:http://www.santii.com/article/31.html


数据更新时间:2018-07-22