Атрибут maxlength тега <input> — межа довжини тексту

HTML

<p>У цьому прикладі, Ви можете змінювати значення для властивості maxlength в межах від 0 до 100 переміщаючи повзунок.</p>
<p id="text"></p>
<input type="range" id="range" min="0" max="100" step="1" name="range">
<input type="button" value="Встановити maxlength" onclick="f()">
<hr>
<br>
<div class="block1" >
  <p> З використанням атрибута <code> maxlength </code> </p>
     <input id="password" type="password" maxlength="10">
</div>

<div class="block2">
 <p> Без використання атрибута <code> maxlength </code></p>
 <input type="password" size="20">
</div>

CSS

*{
  text-align:center;
}

.block1{
  float:left;
  width:45%;
 
}

JS

function f() {
  var maxlength = document.getElementById("range").value;
  var password = document.getElementById("password");
  password.setAttribute("maxlength", maxlength);
  text.innerHTML = "Поточна кількість символів:" + maxlength;
}
//# sourceURL=pen.js

HTML

<p><label for="a">maxlength="5" — наберіть десять символів, увійде п'ять</label></p>
<input id="a" maxlength="5" placeholder="набирайте тут">

<p><label for="b">maxlength="5" і довге значення з розмітки — не обрізано й не позначено помилкою</label></p>
<input id="b" maxlength="5" value="занадто довге значення">

<p><label for="c">type="number" з maxlength="3" — атрибут не діє, набереться скільки завгодно</label></p>
<input id="c" type="number" maxlength="3" placeholder="1234567890">

<p><label for="d">maxlength="0" — поле, у яке неможливо нічого ввести</label></p>
<input id="d" maxlength="0" placeholder="спробуйте набрати">

<p><label for="e">maxlength="4" — наберіть «ab», потім смайлик: місце закінчиться</label></p>
<input id="e" maxlength="4" value="ab">

CSS

p {
    margin: 18px 0 4px;
    max-width: 560px;
}

label {
    font-weight: 600;
}

input {
    min-width: 280px;
    padding: 6px 8px;
    font: 15px/1.4 ui-monospace, monospace;
    border: 2px solid #b9c6d8;
    border-radius: 4px;
}

input:focus {
    border-color: #2f6fd0;
    outline: none;
}

input[maxlength="0"] {
    background: #f4f5f7;
    border-style: dashed;
}