عرض النسبة المئوية للحد الأقصى لإدخال الأحرف CSS+JS

<style type="text/css">

.progress{
العرض: 1 بكسل؛
الارتفاع: 14 بكسل؛
اللون: أبيض؛
حجم الخط: 12 بكسل؛
الفائض: مخفي؛
لون الخلفية: البحرية.
المساحة المتروكة لليسار: 5 بكسل؛
}

</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 > الحد الأقصى) {
field.value = field.value.substring(0, maxlimit);
}

آخر {
// النسبة المئوية لشريط التقدم
نسبة var = parseInt(100 - ((maxlimit - charcnt) * 100)/maxlimit) ;
document.getElementById(counter).style.width = parseInt((fieldWidth*percentage)/100)+"px";
document.getElementById(counter).innerHTML="Lost: "+percentage+"%"
// تصحيح الألوان على النمط من CCFFF -> CC0000
setcolor(document.getElementById(counter),percentage,"background-color");
}
}

وظيفة setcolor(obj,percentage,prop){
obj.style[prop] = "rgb(80%,"+(100-percentage)+"%,"+(100-percentage)+"%)";
}

</script>

<p>الحد: 120 بايت</P>
<النموذج>

<صفوف منطقة النص = "5" cols = "40" اسم = "maxcharfield" معرف = "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>