<style type="text/css">
.ความคืบหน้า{
ความกว้าง: 1px;
ความสูง: 14px;
สี: ขาว;
ขนาดตัวอักษร: 12px;
ล้น: ซ่อนเร้น;
สีพื้นหลัง: น้ำเงิน;
ช่องว่างภายในซ้าย: 5px;
}
</style>
<script type="text/JavaScript">
ฟังก์ชั่น textCounter(field,counter,maxlimit,linecounter) {
// ความกว้างของข้อความ//
var fieldWidth = parseInt(field.offsetWidth);//วิธี parseInt ส่งกลับจำนวนเต็มที่ถูกแปลงจากสตริง แปลงสตริงเป็นจำนวนเต็ม
//obj.offsetWidth หมายถึงความกว้างสัมบูรณ์ของตัวควบคุม obj เอง ไม่รวมส่วนที่ไม่แสดงเนื่องจากการโอเวอร์โฟลว์ นั่นคือ ความกว้างที่ใช้จริง จำนวนเต็ม หน่วยพิกเซล
var charcnt = field.value.length;
// ตัดข้อความเพิ่มเติม
ถ้า (charcnt > maxlimit) {
field.value = field.value.substring(0, ขีดจำกัดสูงสุด);
}
อื่น {
// เปอร์เซ็นต์แถบความคืบหน้า
เปอร์เซ็นต์ var = parseInt(100 - (( maxlimit - charcnt) * 100)/maxlimit);
document.getElementById(เคาน์เตอร์).style.width = parseInt((fieldWidth*เปอร์เซ็นต์)/100)+"px";
document.getElementById(counter).innerHTML="Lost: "+เปอร์เซ็นต์+"%"
// การแก้ไขสีตามสไตล์จาก CCFFF -> CC0000
setcolor(document.getElementById(ตัวนับ),เปอร์เซ็นต์,"สีพื้นหลัง");
-
}
ฟังก์ชั่น setcolor (obj, เปอร์เซ็นต์, เสา) {
obj.style[prop] = "rgb(80%,"+(100 เปอร์เซ็นต์)+"%,"+(100 เปอร์เซ็นต์)+"%)";
}
</script>
<p>จำกัด: 120 ไบต์</P>
<แบบฟอร์ม>
<textarea แถว = "5" cols = "40" name = "maxcharfield" id = "maxcharfield"
onKeyDown = "textCounter (นี้, 'progressbar1', 120)"
onKeyUp = "textCounter (นี้, 'progressbar1', 120)"
onFocus="textCounter(this,'progressbar1',120)" ></textarea><br />
<div id="progressbar1" class="progress"></div>
<script>textCounter(document.getElementById(" ) maxcharfield"),"progressbar1",120)</script>
</form>