Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<title>Znázornění zbývajícího počtu znaků progress barem</title> <h1>Znázornění počtu zbývajících znaků progress barem</h1> <p class="indikace"> <input type="text" data-maxlength="10" size="20"><span></span> </p> <p></p> <p class="indikace"> <input type="text" data-maxlength="20" size="30"><span></span> </p>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.vyplneno-100 {color: red} .vyplneno-90, .vyplneno-80 {color: #5C0002} input+span { color: gray; position: absolute; bottom: 0; left: 0; height: 0; width: 0; border-bottom: 2px solid; transition: width .2s; } .indikace { display: inline-block; position: relative; }
CSS
Autoformát
CSS reset
Až na konci
var omezen = document.querySelectorAll("input[data-maxlength]"); for (var i = omezen.length; i--; ) { omezen[i].onkeyup = omezen[i].onpaste = omezen[i].onkeypress = omezen[i].oninput = prepocitat; zobrazitLimit(omezen[i]); } function prepocitat() { zobrazitLimit(this); } function zobrazitLimit(el) { var delka = el.value.replace(/^\s+|\s+$/g, '').length; var maximalniDelka = el.getAttribute("data-maxlength"); var pocitadlo = el.nextSibling; var procenta = (Math.min(Math.round(delka / maximalniDelka * 10) / 10, 1) * 100); pocitadlo.className = "vyplneno-" + procenta; pocitadlo.style.width = procenta + "%"; }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>