您的位置：首页 > 编程语言

文本框输入文字倒计代码实例

2016-10-11 10:35 357 查看

通常情况下，文本框输入的文字个数并不是无限制的，一般都会限定一个输入最高上限，较为人性化的网站可能会有可输入字数倒计效果，比如还剩余20可以输入这样的提示，下面就通过一个实例介绍一下如何实现此效果。

代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>文本框输入文字倒计效果代码-蚂蚁部落</title>

<style type="text/css">

*{

margin:0;

padding:0;

}

.box{

width:500px;

margin:10px auto;

}

p span{

color:#069;

font-weight:bold;

}

textarea{

width:300px;

}

.textColor{

background-color:#0C9;

}

.grey{

padding:5px;

color:#FFF;

background-color:#CCCCCC;

}

</style>

<script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(function(){

var $tex=$(".tex");

var $but=$(".but");

var ie=jQuery.support.htmlSerialize;

var str=0;

var abcnum=0;

var maxNum=280;

var texts=0;

$tex.val("");

$tex.focus(function(){

if($tex.val()==""){

$("p").html("您还可以输入的字数<span>140</span>");

}

})

$tex.blur(function(){

if($tex.val() == ""){

$("p").html("请在下面输入您的文字：");

}

})

if(ie){

$tex[0].oninput = changeNum;

}

else{

$tex[0].onpropertychange = changeNum;

}

function changeNum(){

//汉字的个数

str=($tex.val().replace(/\w/g,"")).length;

//非汉字的个数

abcnum=$tex.val().length-str;

total=str*2+abcnum;

if(str*2+abcnum<maxNum||str*2+abcnum==maxNum){

$but.removeClass()

$but.addClass("but");

texts=Math.ceil((maxNum-(str*2+abcnum))/2);

$("p").html("您还可以输入的字数<span>"+texts+"</span>").children().css({"color":"blue"});

}

else if(str*2+abcnum>maxNum){

$but.removeClass("")

$but.addClass("grey");

texts =Math.ceil(((str*2+abcnum)-maxNum)/2);

$("p").html("您输入的字数超过了<span>"+texts+"</span>").children("span").css({"color":"red"});

}

}

})

</script>

</head>

<body>

<div class="box">

<p>请在下面输入您的文字：</p>

<textarea name="weibao" class="tex" cols="" rows="8"></textarea>

</div>

</body>

</html>

原文地址：http://www.softwhy.com/forum.php?mod=viewthread&tid=8687

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

标签： 前端 jquery 文字倒计动态 java

相关文章推荐

新的分享

章节导航