JavaScriptでフォームに入力されたローマ字（小文字）を大文字に変換するにはどうしたら良いでしょうか？

Question

a → A
b → B

<input type="text" style="width:200px;" class="form-control" name="codes">

上記フォームに入力された小文字（アルファベット）を大文字に変換するにはどのようなコードを書けば良いでしょうか？

下記のようにするとリアルタイムで変換が出来るのですが、スマートフォンの予測変換機能が使えなかったため、出来れば入力しているフォームからカーソルを外した時に大文字に変換されるとありがたいです。

onkeyup="this.value=this.value.toUpperCase()"

Answer 1

質問の意味を理解できているか自信ありませんが、
現在onkeyupと書いてあるところをonchangeとかに変えたらどうですか？

多分otnさんが言っているのは、
onchange="this.value = this.value.toUpperCase().replace(/ /g, '')"ということだと思います。

ちなみに、/ /gというのは正規表現を使う方法です。
replace(' ', '')とすると文字列中の1つ目のスペースしか消せないので。

参考：【JavaScript入門】replaceの文字列置換・正規表現の使い方まとめ！

ちなみに検証はしてません。

Comments

[退会済みユーザー]

otftrough様

まさしく私が思っていた通りの挙動になりました。
素晴らしい！
ありがとうございました！

JavaScriptに詳しいという事ですが、空白を除去する良い方法を知りませんでしょうか？

[otn]

続けてreplaceすればいいのでは？

[退会済みユーザー]

私フロントがからっきしでして、簡単にで良いのでコードをお願い出来ますでしょうか？

[退会済みユーザー]

出来れば上記コードに修正を加えて頂けるととても助かります。
よろしくお願いします。

[otn]

自分で意味のわからないコードをコピペで動かすというのは止めた方が良いです。

Answer 2

入力と同時に変換してくれる処理

<script>
window.addEventListener('DOMContentLoaded', function(e){
  document.querySelector('[name=codes]').addEventListener('input',function(e){
    var t=e.target;
    if(t.value.match(/[a-z\s]/)){
      var selin = t.selectionStart;
      var len=t.value.length;
      t.value=t.value.toUpperCase().replace(/ /g,"");
      len-=t.value.length;
      t.selectionStart=selin-len;
      t.selectionEnd=selin-len;
    }
  });
});
</script>
<input type="text" name="codes">