禁用鍵盤輸入排除退格

使用JavaScript我試圖禁用用戶輸入豐富的80個人物後，如果他們按「退格」並刪除一些文字記錄，然後他們可以再次輸入文本，直到再次豐富到80.我寫代碼波紋管，但不知道爲什麼它不工作。任何想法？禁用鍵盤輸入排除退格

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script> 
</head> 
<body> 


<input type="text" class="form-control" id="editText" aria-describedby="basic-addon2" value="Something"> 
<span class="input-group-addon" id="basic-addon2">/80</span> 

    <script type='text/javascript'> 

     $('#editText').keyup(updateCount); 
     $('#editText').keydown(updateCount); 

      function updateCount() { 
      var limitText = "/80"; 
      var lengthNumber = $(this).val().length; 
      if (lengthNumber>80) { 
       $("#editText").keydown(false); 
      }else{ 
       $("#editText").keydown(true); 
      } 
      $('#basic-addon2').text(lengthNumber+limitText); 
     } 

    </script> 

</body> 
</html>

來源

2017-08-11 Nix Li

你試過了嗎？ maxlength屬性？ –

當用戶超出極限時，比如在輸入框上放置一個大的紅色邊框，或者有一個字符倒計數而不是實際限制用戶輸入時，提供視覺提示會容易得多。如果計數超過限制，您可以禁用提交按鈕。禁用鍵盤不是好的UX。 – Andy

它必須是JavaScript嗎？你可以使用[maxlength]（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-maxlength）屬性嗎？ –

您可以直接使用輸入屬性MAXLENGTH = 「80」：

<input maxlength="80">

https://jsfiddle.net/ramseyfeng/wph565xu/

來源

2017-08-11 03:07:17

<input type="text" name="usrname" maxlength="80">

可以使用maxlength標籤。

來源

2017-08-11 03:05:54

如果您不能使用maxlength屬性，則必須使用JavaScript/JQuery的，你可以使用波紋管代碼

var limitText = 10; 
$('#editText').keydown(function(e){ 
    if ($(this).val().length > limitText) 
    { 
     if (e.keyCode != 8) 
     { 
      e.preventDefault(); 
      return false; 
     } 
    } 
});

演示：https://jsfiddle.net/5dctLbxq/

來源

2017-08-11 03:13:56 Mark

禁用鍵盤輸入排除退格

回答

相關問題