web-dev-qa-db-ja.com

フォーム入力テキストフィールドに入力できる文字数を制限する

テキストボックスに最大5文字までしか入力できないようにユーザーを制限または制限するにはどうすればよいですか。

以下は私のフォームの一部としての入力フィールドです：

<input type="text" id="sessionNo" name="sessionNum" />

それはmaxSizeのようなものを使っていますか、それともそのようなものを使っていますか？

htmlformsinputtextbox
108
BruceyBandit

最大長 ：

入力として受け入れられる最大文字数。これはSIZEで指定された値よりも大きくなることがあります。その場合、フィールドは適切にスクロールします。デフォルトは無制限です。

<input type="text" maxlength="2" id="sessionNo" name="sessionNum" onkeypress="return isNumberKey(event)" />

ただし、これはハンドラによって影響を受ける可能性があります。長さをテストするために、別のハンドラ関数を使用または追加する必要があるかもしれません。

160
Jared Farrish

最も簡単な方法は次のとおりです。

maxlength="5"

だから..あなたのコントロールにこの属性を追加する：

<input type="text" 
    id="sessionNo" 
    name="sessionNum" 
    onkeypress="return isNumberKey(event)" 
    maxlength="5" />
27
Nonym

ヘッダーに以下を追加してください。

<script language="javascript" type="text/javascript">
function limitText(limitField, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    }
}
</script>

    <input type="text" id="sessionNo" name="sessionNum" onKeyDown="limitText(this,5);" 
onKeyUp="limitText(this,5);"" />
8
b3verelabs

w3c によると、MAXLENGTH属性のデフォルト値は無制限です。あなたが最大を指定しないならば、ユーザーは聖書を2、3回カットアンドペーストしてあなたの形にそれを貼り付けることができます。

MAXLENGTHを妥当な数値に指定したとしても、基本的なMAXLENGTH制限を回避するのは非常に簡単なので、処理する前に（phpやaspのようなものを使用して）送信するデータの長さを確認してください。

7
Mahdi Jazini

簡単にする

      <input type="text" maxlength="3" />

アラートを使用して、最大文字数が使用されたことを示します。

3
user5829707

私はいつもこうやってやっています：

$(document).ready(function(){
var maxChars = $("#sessionNum");
var max_length = maxChars.attr('maxlength');
if (max_length > 0) {
    maxChars.bind('keyup', function(e){
        length = new Number(maxChars.val().length);
        counter = max_length-length;
        $("#sessionNum_counter").text(counter);
    });
}
});

入力：

<input name="sessionNum" id="sessionNum" maxlength="5" type="text">
Number of chars: <span id="sessionNum_counter">5</span>
3
Sašo Krajnc

最大長

入力として受け入れられる最大文字数。 maxlength属性は、要素に許される最大文字数を指定します。

最大長W3の学校

  <form action="/action_page.php">
     Username: <input type="text" name="usrname" maxlength="5"><br>
     <input type="submit" value="Submit">
   </form>
2
Kondal
<input type="text" maxlength="5">

入力に含めることができる最大文字数は5です。

2
anonymous
<input type="number" id="xxx" name="xxx" oninput="maxLengthCheck(this)" maxlength="10">

function maxLengthCheck(object) {
  if (object.value.length > object.maxLength)
  object.value = object.value.slice(0, object.maxLength)
}
1
P.Banerjee

<input type = "text" maxlength="9">を使うことができます

数字の場合は<input type = "number" maxlength="9">、電子メールの検証の場合は<input type = "email" maxlength="9">が表示されます。

1
BKas Development