ど素人から毛を生やす。<延>

ダブランとTRPGを愛する、いわゆる「紙一重」の元web会社員が、
夢を叶えようとしたり趣味にいそしんだりする場末のブログ。

HN 餅。
好きなポケモン ダブラン・バタフリーたん・リザードン先輩・ピンクの悪魔ラッキー

inputに半角だけ入力させたい

Web > javascript 2018年10月10日

どもです。
フォーム回りは本当にブラウザ差異が活発極まりなく。

さて、まずはこの要望についてですが、
ブラウザ側での制御はいくらでも抜け道があるため、action側で全角⇒半角処理を行うのがBEST

という結論を前提に置いてから以下をご覧いただけると幸いです。

今回のテーマは、それでもブラウザ側で制御したい場合。
往々にしてそれはバックヤードなサイト的な、悪意を以てフォームを触る方が現れない閉鎖的なサイトであることでしょう。

そういったサイトの、作業の効率化やミスのリスクを減らすための入力制限を考察します。

HTML、CSSで制御する

IE、Edge、Firefox

<input type="text" style="ime-mode: inactive;">

一昔前、半角の入力制御といったらこれでした。ime-mode。
現在は公式に廃止されるプロパティということで、今後サポートするブラウザは減っていくと思われます。
現にChromeでは効きません。

Chrome

<input type="text" inputmode="latin">

こっちは逆に、新しくてまだあまりサポートされていないプロパティ。Chromeで動きます。
ime-modeほどの強制力はないですが、初期状態が全角でも半角モードで始めてくれます。とてもいい感じ。
でも対応ブラウザが少ない。

jsで制御する

$(document).on("change", 'input', function(){
	let str = $(this).val()
	str = str.replace(/[A-Za-z0-9]/g, function(s) {
	    return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
	});
	$(this).val(str);
});

全角半角の文字コードの差が一定であることを利用して、変換が可能です。

これだけでは日本語や記号などは素通しなので、

$(document).on("change", 'input', function(){
	let str = $(this).val()
	str = str.replace(/[A-Za-z0-9]/g, function(s) {
	    return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
	});
	str = str.replace( /[^!-~]/g , "" );
	$(this).val(str);
});

最終的に半角英数字記号以外は消してしまいましょう。

$(document).on("change", 'input', function(){
	let str = $(this).val()
	str = str.replace( /[^!-~]/g , "" );
	$(this).val(str);
});

全角⇒半角を行わないのなら、これだけ。
ちなみに str.replace(/[^!-~]/g, ""); だと半角スペースも消えるので、正規表現はお好みで調節してください。


参考サイト:
【All About】CSSでIMEの状態を制御するime-modeの使い方+代替方法
【HTML 5.1 日本語訳】4.10.19.7 入力モダリティ:inputmode属性
【Qiita】JavaScriptで英数を全角/半角に変換する方法

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった (0)
  • (・∀・) 参考になった (0)
  • (`・ω・´) 役に立った (0)