フォームに全角で入力された電話番号をリアルタイムで半角にしたい

Question

表題の通り、
フォームに全角で入力された電話番号(及びハイフン「ー」)をリアルタイム(入力中)で半角にしたいです。

フォームからフォーカスが外れた時に全角→半角にする記事は見つかったのですが、
入力中に全角→半角にする記事が見つかりませんでした。

やり方がわかる方がいらっしゃいましたらご教示いただきたいです。

Answer 1

入力中に全角→半角にする記事が見つかりませんでした。

操作性を考え抜いて「それがいい」となった、もしくは関係者しか使わず挙動が熟知される場面なのでしたらいいのですが、そうでないならフォーカスが外れたときに実装することをおすすめします。

入力中の文字列を変更すると、「かな漢字変換との相性」「カーソル位置の問題」など、良好な操作性を確保するために考慮すべき部分が数多くなります。

Answer 2

inputイベントで値をみてヒットしたらレプレースしてください

<input type="text">
<script>
document.querySelector('input').addEventListener('input',e=>{
  var v=e.target.value;
  var reg=/ー－/g;
  if(reg.test(v)){
    e.target.value=v.replace(reg,'-');
  }
});
</script>

Comments

[Jake5]

ご回答ありがとうございます。

こちらkeyupイベントで、レプレース対象を"var reg=/[０-９]|[ー]/g;"とかにして、一文字ごとに0xFEE0を引いたら半角に変換できそうですね。ありがとうございます。

ただ、いただいた例を参考に実装し、挙動を確認するとキーを押下すると同じ文字が連続で表示されるようになると思うのですが、こちら原因わかりますでしょうか？

[yambejp]

あ、ハイフンだけじゃないんですね

document.querySelector('input').addEventListener('input',e=>{
var v=e.target.value;
var reg=/[ー－０-９]/g;
if(reg.test(v)){
e.target.value=v.replace(reg,str=>["ー","－"].includes(str)?"-":String.fromCharCode(str.charCodeAt(0)-0xFEE0));
}
});

[Jake5]

いただいた例を参考に実装し、挙動を確認するとキーを押下すると同じ文字が連続で表示されるようになると思うのですが、こちら原因わかりますでしょうか？

$('input').keyup(function(e){
var v=e.target.value;
var reg=/[ー－０-９]/g;
if(reg.test(v)){
e.target.value=v.replace(reg,str=>["ー","－"].includes(str)?"-":String.fromCharCode(str.charCodeAt(0)-0xFEE0));
}
});