入力フォームで旧漢字などの機種依存文字を検知する方法

WEB制作、マーケティングに関する情報をお届けします。

入力フォームで旧漢字などの機種依存文字を検知する方法

2025.05.27

カテゴリ：WEB制作

タグ：

JavaScript

ホームページなどで旧漢字（旧字体）が使えない理由は、多くの一般的なフォント（例：Arial、MSゴシック、ヒラギノなど）では完全に対応していないため、サービスを提供する際に文字化けしてしまうことが多いためです。
日本に限定したサービスを展開している企業では普通に使っているところも多いですが、旧漢字を使用できないように制限しているサービスの方が多いでしょう。
今回は『入力フォームで旧漢字などの機種依存文字を検知する方法』を紹介します。

デモを見る

コードを紹介

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>
<body>
    <form>
        <table>
            <tr>
                <th>名</th>
                <td>
                    <input type="text" class="text_check" name="first_name" placeholder="名"/>
                </td>
            </tr>
            <tr>
                <th>姓</th>
                <td>
                    <input type="text" class="text_check" name="last_name" placeholder="姓"/>
                </td>
            </tr>
        </table>
    </form>
  <script>
    const dependentChars = /[①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩⅰⅱⅲⅳⅴⅵⅶⅷⅸⅹ㍉㌔㌢㍍㌘㌧㌃㌶㍑㍗㌍㌦㌣㌫㍊㌻㎜㎝㎞㎎㎏㏄㎡〝〟№㏍℡㊤㊥㊦㊧㊨㈱㈲㈹㍾㍽㍼㍻∮∑∟⊿￤＇＂纊褜鍈銈蓜俉炻昱棈鋹曻彅丨仡仼伀伃伹佖侒侊侚侔俍偀倢俿倞偆偰偂傔僴僘兊兤冝冾凬刕劜劦勀勛匀匇匤卲厓厲叝﨎咜咊咩哿喆坙坥垬埈埇﨏塚增墲夋奓奛奝奣妤妺孖寀甯寘寬尞岦岺峵崧嵓﨑嵂嵭嶸嶹巐弡弴彧德忞恝悅悊惞惕愠惲愑愷愰憘戓抦揵摠撝擎敎昀昕昻昉昮昞昤晥晗晙晴晳暙暠暲暿曺朎朗杦枻桒柀栁桄棏﨓楨﨔榘槢樰橫橆橳橾櫢櫤毖氿汜沆汯泚洄涇浯涖涬淏淸淲淼渹湜渧渼溿澈澵濵瀅瀇瀨炅炫焏焄煜煆煇凞燁燾犱犾猤猪獷玽珉珖珣珒琇珵琦琪琩琮瑢璉璟甁畯皂皜皞皛皦益睆劯砡硎硤硺礰礼神祥禔福禛竑竧靖竫箞精絈絜綷綠緖繒罇羡羽茁荢荿菇菶葈蒴蕓蕙蕫﨟薰蘒﨡蠇裵訒訷詹誧誾諟諸諶譓譿賰賴贒赶﨣軏﨤逸遧郞都鄕鄧釚釗釞釭釮釤釥鈆鈐鈊鈺鉀鈻鉎鉙鉑鈹鉧銧鉷鉸鋧鋗鋙鋐﨧鋕鋠鋓錥錡鋻﨨錞鋿錝錂鍰鍗鎤鏆鏞鏸鐱鑅鑈閒隆﨩隝隯霳霻靃靍靏靑靕顗顥飯飼餧館馞驎髙髜魵魲鮏鮱鮻鰀鵰鵫鶴鸙黑]/;
    document.querySelectorAll('.text_check').forEach(el => {
      el.addEventListener('blur', function () {
        if (dependentChars.test(this.value)) {
          alert('環境依存文字を検知しました！');
        }
      });
    });
  </script>
</body>
</html>

コードを解説

HTML

Javascriptで発火させるためにクラス名『text_check』を付与しておきます。

<form>
    <table>
        <tr>
            <th>名</th>
            <td>
                <input type="text" class="text_check" name="first_name" placeholder="名"/>
            </td>
        </tr>
        <tr>
            <th>姓</th>
            <td>
                <input type="text" class="text_check" name="last_name" placeholder="姓"/>
            </td>
        </tr>
    </table>
</form>

Javascript

対象となる文言を変数に入れます。

const dependentChars = /[①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩⅰⅱⅲⅳⅴⅵⅶⅷⅸⅹ㍉㌔㌢㍍㌘㌧㌃㌶㍑㍗㌍㌦㌣㌫㍊㌻㎜㎝㎞㎎㎏㏄㎡〝〟№㏍℡㊤㊥㊦㊧㊨㈱㈲㈹㍾㍽㍼㍻∮∑∟⊿￤＇＂纊褜鍈銈蓜俉炻昱棈鋹曻彅丨仡仼伀伃伹佖侒侊侚侔俍偀倢俿倞偆偰偂傔僴僘兊兤冝冾凬刕劜劦勀勛匀匇匤卲厓厲叝﨎咜咊咩哿喆坙坥垬埈埇﨏塚增墲夋奓奛奝奣妤妺孖寀甯寘寬尞岦岺峵崧嵓﨑嵂嵭嶸嶹巐弡弴彧德忞恝悅悊惞惕愠惲愑愷愰憘戓抦揵摠撝擎敎昀昕昻昉昮昞昤晥晗晙晴晳暙暠暲暿曺朎朗杦枻桒柀栁桄棏﨓楨﨔榘槢樰橫橆橳橾櫢櫤毖氿汜沆汯泚洄涇浯涖涬淏淸淲淼渹湜渧渼溿澈澵濵瀅瀇瀨炅炫焏焄煜煆煇凞燁燾犱犾猤猪獷玽珉珖珣珒琇珵琦琪琩琮瑢璉璟甁畯皂皜皞皛皦益睆劯砡硎硤硺礰礼神祥禔福禛竑竧靖竫箞精絈絜綷綠緖繒罇羡羽茁荢荿菇菶葈蒴蕓蕙蕫﨟薰蘒﨡蠇裵訒訷詹誧誾諟諸諶譓譿賰賴贒赶﨣軏﨤逸遧郞都鄕鄧釚釗釞釭釮釤釥鈆鈐鈊鈺鉀鈻鉎鉙鉑鈹鉧銧鉷鉸鋧鋗鋙鋐﨧鋕鋠鋓錥錡鋻﨨錞鋿錝錂鍰鍗鎤鏆鏞鏸鐱鑅鑈閒隆﨩隝隯霳霻靃靍靏靑靕顗顥飯飼餧館馞驎髙髜魵魲鮏鮱鮻鰀鵰鵫鶴鸙黑]/;

ループでクラス名『text_check』を持つ要素に対して処理を追加します。
入力フォームからフォーカスが外れた時に発火させますのでblurを使用します。
『○○○.test』で入力文字列とあらかじめ登録しておいたテキストをチェックして一致した場合はアラートを立ち上げます。

document.querySelectorAll('.text_check').forEach(el => {
  el.addEventListener('blur', function () {
    if (dependentChars.test(this.value)) {
      alert('環境依存文字を検知しました！');
    }
  });
});

以上で完成です。

まとめ

以上、『入力フォームで旧漢字などの機種依存文字を検知する方法』でした。
お問い合わせフォームとかだとユーザーにとって煩わしいのであまり使用しませんが、会員機能などが関わる部分では必要になってくることがあるかと思います。
その際は、ご参考ください。

テラ合同会社(東京都)

テラは2014年に東京都でスタートアップしたホームページ制作会社です。ホームページ制作以外にも広告運用、マーケティング、ブランディング、印刷物など幅広い領域をサポートしています。
コーポレートサイトはこちらをご覧ください。

WEB制作、マーケティングに関する情報をお届けします。