HTMLで日本語入力制限！驚くほど簡単な4つの方法

はじめに
●方法1：pattern属性を使った日本語入力制限
- ○注意点
●方法2：JavaScriptを使用した日本語入力制限
- ○カスタマイズ
●方法3：入力イベントを監視して日本語入力制限を実現
- ○カスタマイズ
●方法4：HTML5のカスタムデータ属性を使用した日本語入力制限
- ○カスタマイズ
●応用例1：入力制限を複数の条件で設定する
●応用例2：複数のinputタグに入力制限を適用する
- ○注意点
まとめ

はじめに

この記事を読めば、HTMLで日本語入力制限を簡単に実現できるようになります。

日本語入力制限に関する基本的な知識から、使い方、カスタマイズ方法、注意点、さらには応用例まで、初心者目線でわかりやすく解説していきます。

では、さっそくHTMLで日本語入力制限を実現する4つの方法を見ていきましょう！

●方法1：pattern属性を使った日本語入力制限

inputタグの中にpattern属性を使うことで、入力制限を設定することができます。

pattern属性では、正規表現を使って入力を制限します。下記のサンプルコードでは、日本語以外の入力を制限しています。

<form>
  <label for="name">名前:</label>
  <input type="text" id="name" name="name" pattern="[\u3000-\u303F\u3040-\u309F\u30A0-\u30FF\uFF00-\uFF9F\u4E00-\u9FFF]*" title="日本語のみ入力してください">
  <input type="submit" value="送信">
</form>

このコードでは、pattern属性に正規表現を記述して、日本語（ひらがな、カタカナ、漢字、全角記号、全角数字）のみを許可しています。

もし、他の文字が入力された場合、title属性に設定されたメッセージが表示されます。

○注意点

pattern属性は、type属性が”text”、”search”、”url”、”tel”、”email”、”password”のinputタグに対してのみ有効です。
正規表現の理解が必要です。

正規表現は、慣れるまで難しいと感じるかもしれませんが、基本的な書き方を覚えれば簡単に入力制限を設定することができます。

●方法2：JavaScriptを使用した日本語入力制限

JavaScriptを使って、日本語入力制限を実現することもできます。

下記のサンプルコードでは、入力された文字が日本語かどうかをチェックして、日本語以外の文字が入力された場合に警告メッセージを表示しています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script>
    function checkJapaneseInput() {
      let inputText = document.getElementById("name").value;
      let regex = /^[\u3000-\u303F\u3040-\u309F\u30A0-\u30FF\uFF00-\uFF9F\u4E00-\u9FFF]*$/;
      
      if (!regex.test(inputText)) {
        alert("日本語のみ入力してください。");
        return false;
      }
      return true;
    }
  </script>
</head>
<body>
  <form onsubmit="return checkJapaneseInput();">
    <label for="name">名前:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="送信">
  </form>
</body>
</html>

このコードでは、フォームが送信される際に、JavaScriptの関数checkJapaneseInputが実行され、入力された文字が日本語かどうかをチェックしています。

日本語以外の文字が入力された場合には、警告メッセージが表示されます。

○カスタマイズ

警告メッセージを変更するには、alert関数の引数を変更します。
入力制限を変更するには、正規表現を変更します。

●方法3：入力イベントを監視して日本語入力制限を実現

下記のサンプルコードでは、inputタグに入力イベントリスナーを設定して、日本語以外の文字が入力された場合にその文字を削除することで、日本語入力制限を実現しています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script>
    function restrictNonJapaneseInput(e) {
      let regex = /[\u3000-\u303F\u3040-\u309F\u30A0-\u30FF\uFF00-\uFF9F\u4E00-\u9FFF]/;
      let inputChar = String.fromCharCode(e.charCode);

      if (!regex.test(inputChar)) {
        e.preventDefault();
      }
    }
  </script>
</head>
<body>
  <form>
    <label for="name">名前:</label>
    <input type="text" id="name" name="name" onkeypress="restrictNonJapaneseInput(event);">
    <input type="submit" value="送信">
  </form>
 </body>
</html>

このコードでは、inputタグに入力イベントリスナーを設定して、日本語以外の文字が入力された場合にその文字を削除することで、日本語入力制限を実現しています。

onkeypressイベントでrestrictNonJapaneseInput関数を呼び出し、入力された文字が日本語かどうかをチェックしています。

もし日本語以外の文字が入力された場合、e.preventDefault()でその文字の入力を無効化しています。

○カスタマイズ

入力制限を変更するには、正規表現を変更します。

●方法4：HTML5のカスタムデータ属性を使用した日本語入力制限

下記のサンプルコードでは、HTML5のカスタムデータ属性（data-*属性）を使用して、日本語入力制限を実現しています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script>
    function restrictNonJapaneseInput(e) {
      let targetElement = e.target;
      let isJapaneseOnly = targetElement.dataset.japaneseOnly;
      let regex = /[\u3000-\u303F\u3040-\u309F\u30A0-\u30FF\uFF00-\uFF9F\u4E00-\u9FFF]/;
      let inputChar = String.fromCharCode(e.charCode);

      if (isJapaneseOnly && !regex.test(inputChar)) {
        e.preventDefault();
      }
    }
  </script>
</head>
<body>
  <form>
    <label for="name">名前:</label>
    <input type="text" id="name" name="name" data-japanese-only="true" onkeypress="restrictNonJapaneseInput(event);">
    <input type="submit" value="送信">
  </form>
</body>
</html>

このコードでは、data-japanese-only属性を使って、日本語入力制限が必要なinputタグを指定しています。

指定されたinputタグで入力された文字が日本語かどうかをチェックし、もし日本語以外の文字が入力された場合、その文字の入力を無効化しています。

○カスタマイズ

入力制限を変更するには、正規表現を変更します。
日本語入力制限を適用するinputタグを増やすには、data-japanese-only="true"属性を追加します。

以上の4つの方法で、HTMLで日本語入力制限を簡単に実現できます。

それぞれの方法には特徴や適用範囲が異なるため、自分のニーズに合わせて適切な方法を選びましょう。

また、サンプルコードを参考にしながら、使い方やカスタマイズ方法を試してみてください。

これらの方法を理解し、適切に適用すれば、ユーザーが期待通りの入力を行いやすくなり、より使いやすいウェブサイトやアプリケーションを作成できるでしょう。

それぞれの方法の応用例をご紹介します。

●応用例1：入力制限を複数の条件で設定する

例えば、日本語のほかに数字も許可したい場合、正規表現を変更することで実現できます。

下記のサンプルコードでは、日本語と数字の入力を許可しています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script>
    function restrictNonJapaneseAndNumericInput(e) {
      let regex = /[\u3000-\u303F\u3040-\u309F\u30A0-\u30FF\uFF00-\uFF9F\u4E00-\u9FFF0-9]/;
      let inputChar = String.fromCharCode(e.charCode);

      if (!regex.test(inputChar)) {
        e.preventDefault();
      }
    }
  </script>
</head>
<body>
  <form>
    <label for="name">名前（漢字・ひらがな・カタカナ・数字）:</label>
    <input type="text" id="name" name="name" onkeypress="restrictNonJapaneseAndNumericInput(event);">
    <input type="submit" value="送信">
  </form>
</body>
</html>

●応用例2：複数のinputタグに入力制限を適用する

入力制限を複数のinputタグに適用したい場合、onkeypressイベントリスナーを追加するだけで簡単に実現できます。

下記のサンプルコードでは、名前と住所の入力欄に日本語入力制限を適用しています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script>
    function restrictNonJapaneseInput(e) {
      let regex = /[\u3000-\u303F\u3040-\u309F\u30A0-\u30FF\uFF00-\uFF9F\u4E00-\u9FFF]/;
      let inputChar = String.fromCharCode(e.charCode);

      if (!regex.test(inputChar)) {
        e.preventDefault();
      }
    }
  </script>
</head>
<body>
  <form>
    <label for="name">名前:</label>
    <input type="text" id="name" name="name" onkeypress="restrictNonJapaneseInput(event);">
    <label for="address">住所:</label>
    <input type="text" id="address" name="address" onkeypress="restrictNonJapaneseInput(event);">
    <input type="submit" value="送信">
  </form>
</body>
</html>

この記事で紹介した方法を使えば、HTMLで日本語入力制限を簡単に実現できます。

さまざまなケースに対応できるよう、適切な方法を選択し、カスタマイズを行ってください。

これにより、ユーザーが思わぬ入力ミスを防ぐことができ、ユーザビリティの向上につながります。

最後に、入力制限を実装する際の注意点をいくつか挙げます。

○注意点

実装方法によっては、スマートフォンやタブレットでの日本語入力がうまく機能しないことがあります。

そのため、複数のデバイスでテストを行い、確認してください。
入力制限をかけることで、ユーザビリティが向上する一方で、制限が厳しすぎるとユーザーにストレスを感じさせることがあります。

適切な制限範囲を設定し、ユーザーの利便性を損なわないように注意してください。
クライアントサイドでの入力制限だけでなく、サーバーサイドでも入力データのバリデーションを行うことが重要です。

クライアントサイドでの入力制限を回避する方法が存在するため、セキュリティ対策としてサーバーサイドでのチェックも実施してください。