字数输入限制百分比显示CSS+JS

<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">
function textCounter(field,counter,maxlimit,linecounter) {
// text width//
var fieldWidth = parseInt(field.offsetWidth);//parseInt 方法 返回由字符串转换得到的整数。将字符串转换成整型。
//obj.offsetWidth 指 obj 控件自身的绝对宽度,不包括因 overflow 而未显示的部分,也就是其实际占据的宽度,整型,单位像素
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="已输: "+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>
<p>限制:120字节</P>
<form>
<textarea rows="5" cols="40" name="maxcharfield" id="maxcharfield"
onKeyDown="textCounter(this,'progressbar1',120)"
onKeyUp="textCounter(this,'progressbar1',120)"
onFocus="textCounter(this,'progressbar1',120)" ></textarea><br />
<div id="progressbar1" class="progress"></div>
<script>textCounter(document.getElementById("maxcharfield"),"progressbar1",120)</script>
</form>

时间: 2024-11-03 07:38:09

字数输入限制百分比显示CSS+JS的相关文章

JS输入用户名自动显示邮箱后缀列表的方法_javascript技巧

本文实例讲述了JS输入用户名自动显示邮箱后缀列表的方法.分享给大家供大家参考.具体如下: 以下是代码,保存到html文件打开: 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>输入用户名自动显示邮箱后缀列表</title> <script type="text/javascript" src=&q

JS实现是一个文本框(值为参数)输入另一个显示(查询结果)

JS实现是一个文本框(值为参数)输入另一个显示(查询结果)           最近在项目当中遇到了这么一个问题:"在一个文本框中输入编号,然后从数据库中查询对应的名称动态的显示在另一个文本框中."           当一个文本框失去焦点的时候就动态的执行相应的方法,从后台查出数据然后显示在页面上.所以这个时候需要做的就是用JS写一个文本框触发事件.//W3School:http://www.w3school.com.cn/jquery/event_blur.asp(关于失去焦点事件

php+ajax 实现输入读取数据库显示匹配信息_php实例

废话不多说了,直接跟大家贴代码了 dropbox_index.php <!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>

可刷新的Div+CSS+JS制作的树型菜单

css|js|菜单|刷新 Div+CSS+JS组和能够实现很多好看的特殊的效果,这里推荐一款可刷新的下拉菜单源代码: <style type="text/css"><!--*{margin:0;padding:0;border:0;}body { font-family: arial, 宋体, serif; font-size:12px;}#nav { width:180px; line-height: 24px; list-style-type: none; tex

Div+CSS+JS树型菜单,可刷新

css|js|菜单|刷新 <!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> <meta http-equiv=&

变脸:用CSS+JS打造的网页皮肤

css|js|网页 变脸:用CSS+JS打造的网页皮肤 每个人都有不同程度的审美疲劳,说俗一点就是喜新厌旧,对于网页,如何把浏览者的审美疲劳拒之门外,使之对网页保持某种意义上的新鲜感,这是一个值得研究的问题.其实,很多大型网站或者个人网站都会不定期地对网页进行改版,这些都可以归纳为一个字,那就是"变",不停地变换网页的布局与样式,就是为了迎合人们不断变化的口味. CSS核心:属性重定义 先来看几个小技巧: 1.给链接加上修饰 我们通常会用样式表以外的元素对链接进行修饰,比如使用图片.使

可刷新的Div+CSS+JS树型菜单

<!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><meta http-equiv="Content-Typ

HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列

 HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列  本文给大家分享的是使用HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列的方法和示例,非常的实用,特别是在BS架构的企业级应用,有需要的小伙伴可以参考下.     BS架构的企业级应用中,当一个表格列数较多时,用户一个常见的需求就是把前面几个重要的列固定住,这样拖动滚动条时固定的列会方便用户查看数据,用户体验很好.一些重量级的JS组件库也都有这个功能,那么有没有更简单的方法实现这个功能呢? 这个需求常见的解决方案是使

浮动的div自适应居中显示的js代码

 这篇文章主要介绍了浮动的div自适应居中显示的js代码,有需要的朋友可以参考一下 当div是浮动的时候浏览器窗口发生变化的时候不能居中显示(因为浮动的时候一般设定的有left或者right值)   可以先用jquery获取外围的div随浏览器变化而变化的宽度(加上监听事件)   之后再获取div的宽度 例如:   代码如下: function autoWidth(){        var bW = $(".call_man").width();//外围的div      var p