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ů</title> <h1>Znázornění počtu zbývajících znaků</h1> <p> <input type="text" data-maxlength="10" size="20"><span></span> </p> <p> <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; padding-left: .2em; }
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; pocitadlo.innerHTML = maximalniDelka - delka; pocitadlo.className = "vyplneno-" + (Math.min(Math.round(delka / maximalniDelka * 10) / 10, 1) * 100); }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>