全角英数字入力を強制するようなスマホ向けページで最低限できること

#はじめに

全ての入力フォームで全角英数時を強制するようなシステムを生まれる前に消し去りたい

スマホ向けの入力フォームにおいてシステム上の問題でどうしても全角英数字を使わざるを得ない状況ってあるんですよね。ふしぎー。
特にiPhoneでの全角英数字はめんどくさいんですよね。

※ほぼ愚痴です。

#全角英数字問題

本当に滅んで欲しい。

##「全角で入力してください」と注意するだけで何もしてくれない

大抵の全角判定はこんな感じかと思います。（正規表現での書き方はいろいろあるみたい）

あくまで例

function isEmCharacter(str) {
  return /^[^ -~｡-ﾟ]+$/.test(str);
}

isEmCharacter('ABC');     // false
isEmCharacter('ＡＢＣ');  // true
isEmCharacter('ＡBＣ');   // false

全角か半角かの判定はまぁいいです。
けど、入力漏れでもないのに入力をやり直させるという、ユーザーの事を考えてない感があって個人的に凄く不快です。

##全角ハイフンどれだよ問題

住所入力などで全角のハイフンを入力する事もありますが、これ、凄く腹立たしい。
住所の全角縛りとか馬鹿じゃないの

さあ、あなたはどれが全角ハイフンかわかりますか？

1. ー
2. －
3. -
4. —
5. ‐
6. –
7. −
8. ‒
9. ─
10. ―
11. ｰ
12. ━

まぁこれはネタ的な部分もありますが、答えは5番の ‐ です。

しかし、中には全角マイナス － を全角ハイフンとして扱うシステムもあるときた。もうわけがわからない！

変換候補に出てくる記号を見て「全角ハイフンはこれかな」と入力しては注意され入力をやり直す……
これほど無駄なことはありません。

#入力をやり直させないために

システム上どうしても全角英数字を使わざるを得ない状況なのであればフロント側でフォローするべきだと思います。

##半角英数字を全角に自動的に置換する

とりあえずユーザーに入力させてから、半角英数字を全角に置換するだけでもとても優しい世界になると思いませんか？

あくまで例

function replaceCharacter(str) {
  return str.replace(/[A-Za-z0-9!?#$%&@]/g, function (s) {
    return String.fromCharCode(s.charCodeAt(0) + 65248);
  });
}

replaceCharacter('ABC');  // "ＡＢＣ"
replaceCharacter('123');  // "１２３"

##ハイフンに似た記号などを入力してもいい感じにする

住所を全角で入力する時に使う横棒の記号は大抵長音記号 ー か全角ハイフン ‐ だけで、それ以外の記号を住所に使うことはないはず。

あくまで例（全角ハイフンへ置換）

function replaceCharacter(str) {
  str = str.replace(/[A-Za-z0-9!?#$%&@]/g, function (s) {
    return String.fromCharCode(s.charCodeAt(0) + 65248);
  });
  return str.replace(/[-－—–−‒─―ｰ━]/g, '‐');
}

replaceCharacter('1-2');    // "１‐２"
replaceCharacter('5━4−3');  // "５‐４‐３"

あくまで例（全角マイナスへ置換）

function replaceCharacter(str) {
  str = str.replace(/[A-Za-z0-9!?#$%&@]/g, function (s) {
    return String.fromCharCode(s.charCodeAt(0) + 65248);
  });
  return str.replace(/[-‐—–−‒─―ｰ━]/g, '－');
}

replaceCharacter('1-2');    // "１－２"
replaceCharacter('5‐4−3');  // "５－４－３"

番地のみの入力などで長音記号も全角ハイフンにしたいのであれば、上記のコードに長音記号も追加するといいです。

こんな風に使えます。

jQuery

$('#address').change(function () {
  this.value = replaceCharacter(this.value);
});

#おわりに

スマホ向けページなら半角も許容しよう！