JavaScriptが入力を禁止しています-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

JavaScriptが入力を禁止しています

王林

May 12, 2023 am 10:16 AM

JavaScript 入力の禁止

インターネットの継続的な発展に伴い、JavaScript は現代の Web デザインに不可欠な部分になりました。 JavaScript は Web ページの対話性を強化し、ユーザーによるデータの入力と操作を容易にします。ただし、場合によっては、JavaScript を介したユーザー入力を制限する関数を実装する必要があります。たとえば、ユーザーによる特定の文字の入力を禁止したり、ユーザーが入力できる文字数を制限したりできます。この記事では、いくつかの JavaScript テクニックを説明することで、これらの関数を実装するのに役立ちます。

特定の文字の入力を禁止する

ユーザー入力ボックスで特定の文字の入力を禁止したい場合は、JavaScript 正規表現を使用してこれを実現できます。たとえば、ユーザーに数字のみを入力させたい場合は、ユーザー入力ボックスの onkeypress イベントで次のコードを使用できます。

function checkNumber(event) {
  var charCode = event.keyCode;
  if (charCode < 48 || charCode > 57) {
    event.preventDefault();
  }
}

ログイン後にコピー

このコードでは、まず入力された文字の ASCII コードを取得します。ユーザーは、その文字が数字であるかどうかを判断します。数値でない場合は、event.preventDefault() メソッドが呼び出され、デフォルトの文字入力イベントが防止されます。

同様に、他の特定の文字を入力させたくない場合も、判定条件を変更するだけで済みます。たとえば、文字や句読点をユーザーに入力させたくない場合は、次のコードを使用できます。

function checkCharacter(event) {
  var charCode = event.keyCode;
  if ((charCode >= 65 && charCode <= 90) || (charCode >= 97 && charCode <= 122) || (charCode >= 33 && charCode <= 47) || (charCode >= 58 && charCode <= 64) || (charCode >= 91 && charCode <= 96) || (charCode >= 123 && charCode <= 126)) {
    event.preventDefault();
  }
}

ログイン後にコピー

このコードでは、文字が文字であるか句読点であるかを判定するための判定条件を変更します。

スペースは使用できません

ユーザーがデータを入力するときにスペースを入力できないようにしたい場合があります。これは、ユーザーが入力した文字がスペースであるかどうかを検出することで実現できます。たとえば、ユーザー入力ボックスの onkeypress イベントで次のコードを使用できます。

function checkWhiteSpace(event) {
  var charCode = event.keyCode;
  if (charCode === 32) {
    event.preventDefault();
  }
}

ログイン後にコピー

このコードでは、ユーザーが入力した文字がスペースであるかどうかを判断し、スペースである場合はイベントを呼び出します。 PreventDefault() メソッド。デフォルトの文字入力イベントを防止します。

指定された文字数を超える入力を禁止する

ユーザーが入力ボックスに入力する文字数を制限したい場合は、ユーザーの文字数を検出することでこれを行うことができます。入力ボックス。たとえば、ユーザー入力ボックスの oninput イベントで次のコードを使用できます。

function limitInput(event, maxLength) {
  var input = event.target.value;
  if (input.length > maxLength) {
    event.target.value = input.slice(0, maxLength);
  }
}

ログイン後にコピー

このコードでは、まずユーザー入力ボックスの値を取得し、文字数が指定された文字数を超えているかどうかを判断します。最大文字数 (maxLength)。それを超える場合、最初の maxLength 文字がインターセプトされ、入力ボックスに書き戻されます。

完全な例

次の完全な例は、JavaScript を使用して、特定の文字の入力を禁止する、スペースの入力を禁止する、および文字列の入力を禁止するなどの機能を実装する方法を示しています。指定された文字数を超える場合:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript 禁止输入</title>
</head>
<body>
  <form>
    <label>只能输入数字：</label>
    <input type="text" onkeypress="checkNumber(event)">
    <br><br>
    <label>不能输入空格：</label>
    <input type="text" onkeypress="checkWhiteSpace(event)">
    <br><br>
    <label>最多只能输入 5 个字符：</label>
    <input type="text" oninput="limitInput(event, 5)">
  </form>

  <script>
    function checkNumber(event) {
      var charCode = event.keyCode;
      if (charCode < 48 || charCode > 57) {
        event.preventDefault();
      }
    }

    function checkWhiteSpace(event) {
      var charCode = event.keyCode;
      if (charCode === 32) {
        event.preventDefault();
      }
    }

    function limitInput(event, maxLength) {
      var input = event.target.value;
      if (input.length > maxLength) {
        event.target.value = input.slice(0, maxLength);
      }
    }
  </script>
</body>
</html>

ログイン後にコピー

この例では、数字の入力禁止、スペースの入力禁止、および入力禁止の機能を示すために使用される 3 つの入力ボックスを備えたフォームを作成しました。指定された文字数を超える入力。各入力ボックスは、対応する JavaScript イベントハンドラーにバインドされます。

結論

JavaScriptを使用すると、ユーザー入力を制限するさまざまな機能を簡単に実装できます。これにより、Web サイトのセキュリティとデータ品質が向上するだけでなく、ユーザーにより良いインタラクティブエクスペリエンスが提供されます。この記事が、JavaScript をより効果的に使用して Web デザインを実装するのに役立つことを願っています。

以上がJavaScriptが入力を禁止していますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。