Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Vùng nhập liệu » Thanh tiến trình cho khung nhập liệu
URL: https://www.javascriptbank.com/form-field-progress-bar.html
Một thanh tiến trình sẽ xuất hiện mỗi khi người dùng nhập liệu vào khung.
Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Vùng nhập liệu » Thanh tiến trình cho khung nhập liệu
URL: https://www.javascriptbank.com/form-field-progress-bar.html
<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--><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--><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-->