無効な場合でも、HTML5 数値入力フィールドから生の入力を取得する方法

HTML5 数値入力から生の入力を取得する

HTML5 では、要素を使用すると、ユーザーは数値を入力できます。ただし、入力が無効な場合 (数字以外の文字が含まれている場合など)、その value プロパティは空の文字列を返します。

問題:

どうすれば取得できますか からの生の入力フィールドに無効なテキストが含まれていますか?

解決策:

仕様により無効な値の取得は禁止されていますが、入力が空であるか無効な値が含まれているかを判断する方法はありません。文章。したがって、別のアプローチが必要です。

代替アプローチ:

value プロパティに依存する代わりに、入力要素のイベント リスナーを使用して、リアルタイムのユーザー入力。

コード例:

const numberInput = document.getElementById('edQuantity');

numberInput.addEventListener('input', (event) => {
  const rawValue = event.target.value;

  if (isNaN(rawValue)) {
    // Input is invalid text; color it red
    numberInput.classList.add('error');
  } else {
    // Input is a valid number; color it green
    numberInput.classList.remove('error');
  }
});

このスクリプトは、イベント リスナーを にアタッチします。入力値が変更されるたびにそれをキャプチャする要素。次に、値が有効な数値かどうかをチェックします。そうでない場合は、入力を赤色に色付けします。それ以外の場合は緑色になります。

注:

このアプローチでは、無効なテキストを含む生の入力を取得できますが、無効な入力の検証と処理はあなた次第です。

以上が無効な場合でも、HTML5 数値入力フィールドから生の入力を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。