3

私はこのコードを使用し、それは動作します

<HTML>
  <HEAD>
    <SCRIPT language=Javascript>
       <!--
       function isNumberKey(evt)
       {
          var charCode = (evt.which) ? evt.which : event.keyCode;
          if (charCode != 46 && charCode > 31 
            && (charCode < 48 || charCode > 57))
             return false;

          return true;
       }
       //-->
    </SCRIPT>
  </HEAD>
  <BODY>
    <INPUT id="txtChar" onkeypress="return isNumberKey(event)" 
           type="text" name="txtChar">
  </BODY>
</HTML>

しかし、私はhtmlにアクセスできず、javascriptしか持っていません

document.getElementById("txtChar").addEventListener("keypress", <<your code>>, false);

何が必要<<your code>>ですか？

ps は、このコンポーネントに別のバグを発見しました:
コピーして貼り付け (ctrl-v または右クリックして貼り付け) すると機能しません
。誰かがそれを解決する方法を知っていますか

4

7 に答える 7

4

HTML5最新のブラウザーのみを対象としている場合は、新しい属性requiredとpatternが役に立ちます。例：

<input id="txtChar" type="number" required pattern="\d+"/>

そして、次のようなCSSを介して状態に対処できます

#txtChar:required:valid {
    border: 1px solid green;
}

#txtChar:required:invalid {
    border: 1px solid red;
}

<form>タグ内で使用すると、ユーザーは無効な状態で送信できなくなります。

マークアップにアクセスできないとのことでしたので、お詫び申し上げます。情報の回答として残しておきます。

于 2013-01-29T14:40:23.840 に答える
1

この場合、<<your code>>それを処理する関数の名前を追加します。また、前isNumberKeyに追加する必要がありますevt.preventDefault();return false;

以下のこの関数は、0 から 9 までの数字に対応するコードのみを受け入れ、ドット (".")、ハイフン ("-")、およびマイナス記号 ("-") を無視します。

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode == 46 || charCode > 31 && (charCode < 48 || charCode > 57)){
        evt.preventDefault();
        return false;
    }
    return true;
}

HTML5 ブラウザーの入力フィールドを構成します。

txtChar = document.getElementById("txtChar")
txtChar.addEventListener("keypress", isNumberKey, false);

//Attributes
txtChar.type = "number";
txtChar.min = 0;
txtChar.pattern = "\\d+";
txtChar.placeholder = "Only integer positive numbers";
txtChar.required = "required";

jAndyの回答からのスタイリングを含む実例: http://jsfiddle.net/pL9Zk/

于 2014-06-18T01:01:22.380 に答える
0

それは間違い？

document.getElementById(**"txtChar"**).addEventListener("keypress", function(){
                return isNumberKey(event);
            }, false);
于 2013-01-29T14:42:19.027 に答える
0

このコードを試してみてください。私はjQUERYを使用しています。

<head>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>


<input id="txtChar" type="text" name="txtChar">

</body>


<script>

    $("#txtChar").keypress(function(e) {
       var charCode = (e.which) ? e.which : event.keyCode;
          if (charCode != 46 && charCode > 31 
            && (charCode < 48 || charCode > 57))
             return false;

          return true;
    });

</script>
于 2014-06-18T01:20:59.533 に答える
0

私はパーティーに少し遅れていることを知っています。

jAndy による HTML5 の例は、それをサポートするブラウザーにとっておそらく最良の答えです。Josaph による JavaScript の回答も、質問者の補遺と私の問題を解決するための私の回答に影響を与えたという点で優れていました。

次の例では、正規表現に一致する入力 (数字ではなく、空の文字列に置き換えます) を破棄し、貼り付けからでも、入力があるたびに呼び出されます。

 function stripNonNumeric() {
   this.value = this.value.replace(/\D+/g, '');
 }

 var txtChar = document.getElementById("txtChar");
 if (txtChar.addEventListener) {
   txtChar.addEventListener("input", stripNonNumeric);
 } else if (txtChar.attachEvent) {
   txtChar.attachEvent("oninput", stripNonNumeric);
 }

私は JavaScript の専門家ではありません。これが問題を解決する良い方法なのかどうか、または考慮すべきパフォーマンスの問題があるかどうかはわかりません。しかし、それは私にとってはうまくいきます。

于 2015-03-03T16:37:10.937 に答える
0

HTML5 を使用できない場合は<input type="number">、数値のみを許可する入力値を正規表現します。同様のタスクを実行するために、作成したスクリプトを変更しました。貼り付けを許可し、整数以外の文字を取り除きます。

var arrowKeys = [37, 38, 39, 40];  

function stripChars( e ) {
  // Don't execute anything if the user is just moving the cursor around and
  // not really entering anything new.
  if(arrowKeys.indexOf(e.keyCode) !== -1){ return; }

  var elem = e.currentTarget,
      cursorPos = elem.selectionEnd;

  // strip any unwanted character and assign the value back
  elem.value =  elem.value.replace(/\D/g,'');
  // this avoids the cursor shifting to the end of the input 
  // when inserting an integer in the middle of an already existing number
  elem.selectionEnd = cursorPos;
  elem.focus();
}

var elem = document.getElementById('elem');

elem.addEventListener('keyup', stripChars, false); 
elem.addEventListener('paste', stripChars, false);

とにかく、ここでテストを含む元のスクリプトと、ここで上記のコードのデモを表示できます。

于 2014-11-19T11:56:08.123 に答える
0

イベントは関数内で不明です。したがって、機能するイベントオブジェクトについて言及します。

document.getElementById("myElement").addEventListener("keypress", function( event ){ return isNumberKey(event); }, false);

編集：質問が少し変わったので、答えを引用します：
1.「myElement」を「txtChar」に変更
します2.パラメーターとしてイベントオブジェクトを含めます

document.getElementById("txtChar").addEventListener("keypress", function(event){
                    return isNumberKey(event);
                }, false);
于 2013-01-29T14:40:33.083 に答える