JavaScriptで数値とドットのみを許可する入力テキストフィールドの作成方法


  1. HTMLの入力フィールドを作成します。
<input type="text" id="numericInput" />
  1. JavaScriptで入力フィールドの値を監視し、数値とドット以外の文字が入力された場合に削除します。
const inputField = document.getElementById('numericInput');
inputField.addEventListener('input', function() {
  let value = inputField.value;
  value = value.replace(/[^0-9.]/g, ''); // 数値とドット以外の文字を削除
  inputField.value = value;
});

上記のコードでは、input イベントを監視して、入力フィールドの値が変更されたときに実行される関数を定義しています。replace メソッドを使用して、正規表現 /[^0-9.]/g を使って数値とドット以外の文字を空文字列に置き換えています。

これにより、入力フィールドには数値とドットのみが許可されるようになります。

以上が、JavaScriptを使用して数値とドットのみを許可する入力テキストフィールドを作成する方法です。この方法を使用することで、ユーザーが数値以外の文字を入力することを防ぎ、正しい入力を確実にすることができます。