<html>
<style type="text/css">
.progress{
width: 1px;
height: 14px;
color: white;
font-size: 12px;
overflow: hidden;
background-color: navy;
padding-left: 5px;
}
</style>
<script type="text/JavaScript">
//more javascript from http://www.smallrain.net
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.width = parseInt((fieldWidth*percentage)/100)+"px";
document.getElementById(counter).innerHTML="Limit: "+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>
<textarea rows="5" cols="40" name="maxcharfield" id="maxcharfield"
onKeyDown="textCounter(this,'progressbar1',20)"
onKeyUp="textCounter(this,'progressbar1',20)"
onFocus="textCounter(this,'progressbar1',20)" ></textarea><br />
<div id="progressbar1" class="progress"></div>
<script>textCounter(document.getElementById("maxcharfield"),"progressbar1",20)</script>
</form>
</html>
分享到:
相关推荐
angularjs实现textarea文本输入字数限制功能
NULL 博文链接:https://diaoweili.iteye.com/blog/774179
textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到。与单行文本框text控件不同,它不能通过maxlength属性来限制字数,为此必须寻求其他方法来加以限制以达到预设的需求。 ...
jquery新浪发布微博textarea文本框限制文字字数表单 jquery新浪发布微博textarea文本框限制文字字数表单
本文实例讲述了jquery实现textarea输入框限制字数的方法。分享给大家供大家参考。具体分析如下: 网上有使用属性 disabled 来实现,这个不好,想修改都没有修改。当然,这个也不是很完美。 代码如下:<html> &...
js和jquery分别实现对textarea字数的限制,精彩
jQuery textarea文本框输入文字字数限制提示代码,设置固定输入字符,实时计算显示已经输入多少字符。
控制textarea文本长度,限制输入字数(带统计)的特效! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
textarea剩余字数
自己写的一个小东西 前段时间自己要用在网上下载了一个 不过不好用,自己就写了一个 自我感觉还不错,而且对于限制输入的东西可以根据不同的情况自己修改,方便大家 方便你我他!
手机端textarea中输入字数监控
JQuery实现textarea可以有字数录入提醒功能
在textarea光标处插入文本
jQuery textarea文本框输入文字字数限制提示代码,设置固定输入字符,实时计算显示已经输入多少字符。
textarea字数限制 练习代码多有参考网络 by ahuinan [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 下面的这段代码,直接计算文档的长度 input 字数限制 [Ctrl+A 全选 注:如需引入外部Js需刷新才能...
效果超酷的textarea的输入字数限提示
Vue实现动态显示textarea剩余文字数量,具体内容如下 这里我们假设允许用户输入的最多数量为200个 html代码如下: <textarea maxlength="200" @input="descInput" v-model="desc" /> <span>{{remnant}}/200...