どもです。
フォーム回りは本当にブラウザ差異が活発極まりなく。
さて、まずはこの要望についてですが、
ブラウザ側での制御はいくらでも抜け道があるため、action側で全角⇒半角処理を行うのがBEST
という結論を前提に置いてから以下をご覧いただけると幸いです。
今回のテーマは、それでもブラウザ側で制御したい場合。
往々にしてそれはバックヤードなサイト的な、悪意を以てフォームを触る方が現れない閉鎖的なサイトであることでしょう。
そういったサイトの、作業の効率化やミスのリスクを減らすための入力制限を考察します。
HTML、CSSで制御する
IE、Edge、Firefox
<input type="text" style="ime-mode: inactive;">
一昔前、半角の入力制御といったらこれでした。ime-mode。
現在は公式に廃止されるプロパティということで、今後サポートするブラウザは減っていくと思われます。
現にChromeでは効きません。
Chrome
<input type="text" inputmode="url">
こっちは逆に、新しくてまだあまりサポートされていないプロパティ。Chromeで動きます。
ime-modeほどの強制力はないですが、初期状態が全角でも半角モードで始めてくれます。とてもいい感じ。
でも対応ブラウザが少ない。対応項目も少ない。
Chromeの場合、これ書いた時点では参考サイト様の表でも｢LS｣対応の項目しか対応されません。
jsで制御する
$(document).on("change", 'input', function(){
let str = $(this).val()
str = str.replace(/[Ａ-Ｚａ-ｚ０-９]/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(/[Ａ-Ｚａ-ｚ０-９]/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属性
【とほほのＷＷＷ入門】inputmode=mode - 入力モード
【Qiita】JavaScriptで英数を全角/半角に変換する方法