Q&A
このコメントは回答欄に移しました。
下に示しました html を実行すると
■表示されるテキストボックスに、半角で 123 と入力すると、123 と出力されます。
これは期待通りの動作です。
■全角で 123 と入力すると、112123 と出力されます。
全角入力で確定していない文字列が取込まれる印象を持ちました。
コンソールのログは以下の通りでした。
全角１を入力する
s1= １
s2= 1
引き続いて、全角２を入力する
s1= 1１２
s2= 112
引き続いて、全角３を入力する
s1= 112１２３
s2= 112123
★質問内容は、
全角で １２３ と入力した時に、どうして半角で 123 と入力した時とは異なる振る舞いになるのか？
になります。よろしくお願い致します。
実行環境
windows10 google chrome
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>文字列置換</title> 6 </head> 7 <body> 8 <p>入力</p> 9 <input id="text1" type="text"/> 10 11 <script type="text/javascript"> 12 document.getElementById("text1").addEventListener("input", function(e) { 13 // 入力 14 const s1 = e.currentTarget.value 15 console.log("s1=", s1) 16 17 // 全角英数字 → 半角英数字 に変換する 18 const s2 = s1.replace(/[Ａ-Ｚａ-ｚ０-９]/g, (v) => { 19 return String.fromCharCode(v.charCodeAt(0) - 0xFEE0) 20 }) 21 console.log("s2=", s2) 22 23 // 出力 24 document.getElementById("text1").value = s2 25 }) 26 </script> 27 </body> 28</html>
回答2件
0
IME入力で確定前のテキストも <input> の value プロパティで取れるようになってます。たしか、Safari と Chrome に共通の動作で IE や Firefox ではそんなことは起きません。
回避するには、compositionstart イベントから compositionend イベントまでの間は input イベントを無視して、compositionend イベントのときに value プロパティを処理します。
投稿2022/05/29 22:27
総合スコア20882
0
input イベントに代えて change イベントを使ったらどうなるでしょう？
change イベントはテキストボックスからフォーカスが外れた時発生するので問題は回避できるのではないかと思われます。
投稿2022/05/28 09:16
編集2022/05/28 09:20退会済みユーザー
総合スコア0
回答、ありがとうございます。
次のステップとして実現したいことがあります。
入力中に文字列をカウントし、例えば、５文字の時と、それ以外の時で、
テキスト入力エリアの背景色を変更することを考えています。
入力文字数が５文字になった瞬間に背景色を変更し、６文字になったらまた元に戻す、という動作です。
このスレッドの課題の全角英数字 ⇒ 半角英数字変換は上の回答で解決したのでしょうか？ 解決したのであればこのスレッドはクローズしてください。
> 次のステップとして実現したいことがあります。
それはこのスレッドの課題である全角英数字 ⇒ 半角英数字変換とは別の課題なので、新たに別のスレッドを立てて質問してください。
質問内容は、
全角文字入力時の input イベントの動作についてです。
input イベントを使用した時に、全角文字入力がどうして 112123 と変換されるのか？
なので、まだ解決していないと考えております。
> input イベントを使用した時に、全角文字入力がどうして 112123 と変換されるのか？
そこは質問者さんの推測「全角入力で確定していない文字列が取込まれる印象を持ちました」が当たっていると思いますけど？
さらに深く掘り下げて、漢字かな変換ソフト（IME 他いろいろある）とブラウザ（これも Chrome 他いろいろある）の JavaScript の動作・相性とかの解析まで必要なのですか？
それは気の遠くなるような話で自分にはそこまで考える気力はないです。お役に立てずすみませんが、他の方の回答をお待ちください。
あなたの回答
tips
プレビュー
