Как установить максимальное число символов и минимальное количество символов для ввода типа html

Question

hi Я пытаюсь установить минимальное количество символов (например: 4) для пароля, а также установить максимальное количество символов (например: 4) для пароля ,

<input type="password" id="myText" placeholder="Password" name="password" style="width: 390px; height: 50px" minlength="4" maxlength="4"> 

проблема минимальный символ числа для пароля не работает. Я использую maxlength для максимального символа и minlength для минимального символа. помогите мне решить проблему

<a class="label" style="width: 336px; height:33px;" > 
          <font color="white" size="5px">LOGIN (STEP 1) 
          </font></a><br/><br/><form id="myForm" action="<?php echo $_SERVER['PHP_SELF']?>" method="post"> 
          <input type="text" id="myText" placeholder="Username" name="username" style="width: 390px; height: 50px"> 
          <br/><br/> 
          <input type="password" id="myText" placeholder="Password" name="password" style="width: 390px; height: 50px" minlength="4" maxlength="4"> 

          <br/><br/> 


                                                             <a href="forgotpassword"style="width: 48%; text-decoration:none;">  <font color="white" size="4px;">Forgot Password? Need Help!</font> </a> 


          <br/><br/> 


          <a class="button1" onclick="myFunction()" style="text-decoration:none;"><font color="white" size="5px">Next</font></a></form> 


        </div></div></div> 

      <script> 
       function myFunction() { 
        var username = document.forms["myForm"]["username"].value; 
        var password = document.forms["myForm"]["password"].value; 
        if (username == null || username == ""&&password == null || password == "") { 
         alert("complete all fields"); 
         return false; 
        }else{ 
         document.getElementById("myForm").submit().value="submit"; 
        } 
       } 
      </script> 

Answer 1

атрибут minlength не поддерживается большинством браузеров на данный момент.

вместо этого вы можете попробовать ниже

<input type="password" pattern=".{4,}" required> //min chars - 4 
<input type="password" pattern=".{4,8}" required> //min chars - 4 max chars - 8 

или вы можете использовать JQuery или додзё widjets, который имеет атрибуты MINLENGTH встроенные в

Answer 2

Вы можете использовать немного CSS и keyup обработчик. Скажите, что ваш вход находится в пределах div#pwdrow. Дайте, что Див data-attribute, стиль это так

#pwdrow:after { 
    content: attr(data-lenchk); 
    color:red; 
    font-weight: bold; 
} 

и использовать этот keyup обработчик:

function checklen(e){ 
    var valLen = this.value.length; 
    d.querySelector('#pwdrow') 
     .setAttribute('data-lenchk', 
         valLen < 4 ? 'too short (min 4)' 
         : valLen > 6 ? 'too long (max 6)' : ''); 
} 

Вот jsFiddle вы можете играть с