javascript - javascriptを使用してテキストボックスに2桁のみ（1日の時間）のみを入力するようにユーザーを制限する方法

Question

javascript を使用してテキスト ボックスに 2 桁 (1 日の時間数) のみを入力するようにユーザーを制限する方法。

1 日は 24 時間しかないため、ユーザーは 1 ～ 24 の数字しか入力できません。

Answer 1

詳細:次の例では、テキスト ボックスに 2 桁しか入力できませんが、onkeypress では、ユーザーは数値のみを入力できます。

テキストボックス

<input id="txtHours" type="text" maxlength="2" 
  onkeypress="if(event.keyCode<48 ||     event.keyCode>57)event.returnValue=false;" 
  onkeyup="validation(event.keyCode)" onpaste="return false" />

Javascript 検証機能

  function validation(keyCode)
  {
        var Hours = document.getElementById("txtHours").value;

        if (Hours < 0 || Hours > 24)
            alert("Must enter a time between 0-24 hours");           
 }

Answer 2

おそらくJavaScriptを避けてHTMLを使用してください：

<input id="my_id" type="text" name="your_text_field" maxlength="10">

ここでさらに見てください：http://www.w3schools.com/tags/att_input_maxlength.asp

javascript を使用する必要がある場合 (HTML が後で追加されたり、奇妙なことが起こった場合など):

$("#my_id").attr("maxLength", 10);

テキストボックスに数字を要求することに関しては、いくつかの方法があります。提案されているインライン JavaScript または別の関数が便利です。

var input = document.getElementById('my_id');
input.onkeydown = function(e) {
    var k = e.which;
    /* numeric inputs can come from the keypad or the numeric row at the top */
    if ( (k < 48 || k > 57) && (k < 96 || k > 105)) {
        e.preventDefault();
        return false;
    }
};

この関数と他の関数をここで見ることができます: Javascript を使用してテキストボックスに数値のみを許可する

Answer 3

入力のことだと思います。jquery プラグイン「マスク入力」を使用できます。軽量で便利です。

http://digitalbush.com/projects/masked-input-plugin/

Answer 4

HTML5を使用している場合、これでうまくいきます

<input type="number" name="quantity" min="1" max="24">

または、キープレスイベントを介して何らかの条件を実行できます。

Answer 5

短くて読みやすく、(ほぼ) すべてのブラウザーで動作する単純なコードについては、 jQuery mask plugin をお勧めします。

それはこのようになります

   $('.txtBox').mask("99");

これは 2 桁に制限され、ユーザーが 0-9 以外を入力することを許可しません。

ダウンロードはこちらから

最大長を設定するだけの問題は、ユーザーが文字などを入力できることです。HTML5 の回答の問題は、多くの人が古いブラウザを使用していることです。

編集: 実際にユーザーが 0 ～ 24 以外の値を入力できないようにしたい場合は、使用可能なすべてのオプションがある場所をドロップダウンで選択することをお勧めします。

それ以外の場合、やりたいことを達成する最も簡単な方法は、blur() でテキスト ボックスを検証し、24 未満であることを確認することです。

これらのいずれも行いたくない場合は、キープレスをキャッチするカスタム ハンドラーを作成する必要があります。これはかなり複雑になります。"9" と入力することは許可されていますが、" 9" が入力されましたが、"0"、"1"、または "2" を入力すると、別の数字が許可されます。また、コピーと貼り付けについても心配する必要があります。これを大きな頭痛の種に変える代わりに、選択ドロップダウンを使用してください。または、ユーザーが入力しようとしているものを入力した後にテキストボックスを検証します。数字だけにマスキングすることで、ユーザーはテキスト ボックスに何を入力すべきかを理解できるようになります。

Answer 6

私はその解決策を見つけます

HTML

<input name="txthours" type="text" id="txthours" maxlength="2"/>

  <span id="Errormessage"></span>

Jクエリ

 $('#txthours').bind('input', function() {

      $(this).val($(this).val().replace(/[A-Za-z]/g,''))

 var Hours =$("#txthours").val();

    if (Hours < 1 || Hours > 24)

    { 
      $(this).val($(this).val().replace(/[^A-Za-z]/g,''))

      $('#Errormessage').html('Must enter a time between 0-24 hours');                
    }});

ライブデモ

Answer 7

テキストボックスに属性maxlength=2を使用してください。