HTMLの入力フィールドで文字のみを許可する方法

2024-02-09 23:07 HTML 入力フィールド 文字制限

  1. HTML5のパターン属性を使用する方法: パターン属性を使用すると、正規表現パターンを指定して入力を制限できます。以下のコード例を参考にしてください。

    <input type="text" pattern="[A-Za-z]+" title="Alphabets only" required>

    上記の例では、[A-Za-z]+の正規表現パターンが指定されており、ユーザーはアルファベットのみを入力できます。title属性を使用すると、ユーザーにエラーメッセージを表示することもできます。

  2. JavaScriptを使用する方法: JavaScriptを使用して、入力フィールドのキーアップイベントを監視し、入力された値が文字のみであるかどうかをチェックすることもできます。以下のコード例を参考にしてください。

    <input type="text" id="lettersOnly" required>
<script>
var inputField = document.getElementById("lettersOnly");
inputField.addEventListener("keyup", function(event) {
 var inputValue = event.target.value;
 var lettersRegex = /^[A-Za-z]+$/;
 if (!lettersRegex.test(inputValue)) {
   event.target.value = inputValue.slice(0, -1);
 }
});
</script>

    上記の例では、キーアップイベントを監視して、入力された値が正規表現^[A-Za-z]+$に一致しない場合、入力値の最後の文字を削除します。

これらの方法を使用すると、HTMLの入力フィールドで文字のみを許可することができます。必要に応じて、上記のコード例をカスタマイズしてください。