»
AnglaisFran�aisVietnamien

Imprimer - Champ de formulaire barre de progression - JavaScriptBank.com

Version compl�te: jsB@nk » Form » Textarea » Champ de formulaire barre de progression
URL: https://www.javascriptbank.com/form-field-progress-bar.html

Champ de formulaire barre de progression © JavaScriptBank.comSimilaires en fonction de limiteur de champ, ce JavaScript vous permet de limiter le nombre de caractères l'intérieur d'un forme élément (c'est-à-dire: textarea) tout en affichant une barre de progression sur les autres caractères sous lui. Très cool, et travaille à IE4 +, NS6 +, et Opera 7 +.

Version compl�te: jsB@nk » Form » Textarea » Champ de formulaire barre de progression
URL: https://www.javascriptbank.com/form-field-progress-bar.html



CSS
<style type="text/css">.progress{width: 1px;height: 14px;color: white;font-size: 12px;  overflow: hidden;background-color: navy;padding-left: 5px;text-align: left;}</style><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


JavaScript
<script type="text/JavaScript">/************************************************ Form Field Progress Bar- By Ron Jonk- http://www.euronet.nl/~jonkr/* Modified by Dynamic Drive for minor changes* Script featured/ available at Dynamic Drive- http://www.dynamicdrive.com* Please keep this notice intact***********************************************/function textCounter(field,counter,maxlimit,linecounter) {// text width//var fieldWidth =  parseInt(field.offsetWidth);var charcnt = field.value.length;        // trim the extra textif (charcnt > maxlimit) { field.value = field.value.substring(0, maxlimit);}else { // progress bar percentagevar 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 -> CC0000setcolor(document.getElementById(counter),percentage,"background-color");}}function setcolor(obj,percentage,prop){obj.style[prop] = "rgb(80%,"+(100-percentage)+"%,"+(100-percentage)+"%)";}</script><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<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><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->