質問

HTMLのテキスト入力( <input type=text /> を使用すると、数字キーストローク（+「.」）のみが許可されます。）

解決方法は？

<上 注意 これは更新された回答です。以下のコメントは、キーコードをいじくりまわしていた古いバージョンに言及しています。

JavaScript

自分でやってみる on JSFiddle .

テキストの入力値をフィルタリングすることができます <input> を次のように指定します。 setInputFilter 機能（Copy+Paste、Drag+Drop、キーボードショートカット、コンテキストメニュー操作、入力不可能なキー、キャレット位置、さまざまなキーボードレイアウト、そして IE9以降の全ブラウザ ):

// Restricts input for the given textbox to the given inputFilter function.
function setInputFilter(textbox, inputFilter) {
  ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
    textbox.addEventListener(event, function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      } else {
        this.value = "";
      }
    });
  });
}

これで setInputFilter 関数を使って、入力フィルタをインストールすることができます。

setInputFilter(document.getElementById("myTextBox"), function(value) {
  return /^\d*\.?\d*$/.test(value); // Allow digits and '.' only, using a RegExp
});

をご覧ください。 JSFiddleのデモ は、入力フィルタの例です。また、まだ は、サーバーサイドのバリデーションを行う必要があります。

タイプスクリプト

これをTypeScript化したものがこちらです。

function setInputFilter(textbox: Element, inputFilter: (value: string) => boolean): void {
    ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
        textbox.addEventListener(event, function(this: (HTMLInputElement | HTMLTextAreaElement) & {oldValue: string; oldSelectionStart: number | null, oldSelectionEnd: number | null}) {
            if (inputFilter(this.value)) {
                this.oldValue = this.value;
                this.oldSelectionStart = this.selectionStart;
                this.oldSelectionEnd = this.selectionEnd;
            } else if (Object.prototype.hasOwnProperty.call(this, 'oldValue')) {
                this.value = this.oldValue;
                if (this.oldSelectionStart !== null &&
                    this.oldSelectionEnd !== null) {
                    this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
                }
            } else {
                this.value = "";
            }
        });
    });
}

jQuery

これのjQuery版もあります。参照 この答え .

HTML 5

HTML5では、ネイティブソリューションとして <input type="number"> (を参照してください）。 仕様 ただし、ブラウザの対応状況はさまざまです。

• ほとんどのブラウザは、フォームを送信するときにのみ入力の検証を行い、入力中には検証を行いません。
• ほとんどのモバイルブラウザ をサポートしていません。 step , min と max 属性があります。
• Chrome (バージョン71.0.3578.98) では、現在でも、文字 e と E をフィールドに挿入します。また この質問 .
• Firefox（バージョン64.0）およびEdge（EdgeHTMLバージョン17.17134）では、現在も、ユーザーが 任意の のテキストをフィールドに入力します。

自分でやってみる w3schools.comで .