HTMLの入力フィールドでユーザーが文字のみを入力できるようにする方法

HTMLのinput要素のtype属性を使用する方法: HTMLのinput要素のtype属性を「text」とし、pattern属性を使用して正規表現を指定することで、入力に制約をかけることができます。

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

上記の例では、pattern属性に正規表現[A-Za-z]+を指定しています。これは、入力がアルファベットのみで構成されることを要求します。title属性は、入力が制約に違反した場合に表示されるメッセージを指定します。

この方法では、入力フィールドにアルファベット以外の文字が入力された場合、ブラウザが自動的にエラーメッセージを表示します。

JavaScriptを使用する方法: JavaScriptを使って、入力フィールドでのキーボード入力イベントを監視し、アルファベット以外の文字の入力を制御する方法もあります。

<input type="text" id="myInput" />
<script>
document.getElementById("myInput").addEventListener("keypress", function(event) {
 var charCode = event.which || event.keyCode;
 var charStr = String.fromCharCode(charCode);
 if (!/[A-Za-z]/.test(charStr)) {
   event.preventDefault();
 }
});
</script>

上記の例では、JavaScriptを使用してkeypressイベントを監視しています。入力された文字のキーコードを取得し、それがアルファベット以外の場合にはデフォルトの動作をキャンセルしています。

この方法では、入力フィールドにアルファベット以外の文字が入力されようとすると、入力が無視されます。