javascrpt 限制文本框输入字数并以百分比显示已输入字数

作者：袖梨 2022-07-02

提示：您可以先修改部分代码再运行

<!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>
<title>javascrpt 限制文本框输入字数并以百分比显示已输入字数</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">

<style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>">
.progress{
	
	
	color:white;
	font-size:12px;
	overflow:hidden;
	background-color:navy;
	padding-left:5px;
}
</style>
</head>
<body>

<script type="text/javascript">
function textCounter(field,counter,maxlimit,linecounter){
//text width
var fieldWidth=parseInt(field.offsetWidth);
var charcnt=field.value.length;
//trim the extra text
if(charcnt>maxlimit){
field.value=field.value.substring(0,maxlimit);
}
else{
//progress bar percentage
var percentage=parseInt(100-(( maxlimit-charcnt)*100)/maxlimit);
document.getElementById(counter).style.px";
document.getElementById(counter).innerHTML="已输入："+percentage+"％"
//color correction on style from CCFFF -> CC0000
setcolor(document.getElementById(counter),percentage,"background-color");
}
}
function setcolor(obj,percentage,prop){
obj.style[prop]="rgb(80%,"+(100-percentage)+"%,"+(100-percentage)+"%)";
} 
</script>
<form>
限制：120个字节<br>
<textarea rows="5" cols="40" name="maxcharfield" id="maxcharfield" onKeyDown="textCounter(this,'progressbar1',120)" onKeyUp="textCounter(this,'progressbar1',120)" onPaste="textCounter(this,'progressbar1',120)" onFocus="textCounter(this,'progressbar1',120)">

提示：您可以先修改部分代码再运行

javascrpt 限制文本框输入字数并以百分比显示已输入字数

相关文章

精彩推荐