JavaScript toUpperCaseのみ最初の文字

Question

もう一度：ここで学んでいます！ このような基本的な質問に申し訳ありませんが、私は学ばなければなりません...

私はオンラインで読む私はすべてのキャップの最初の文字からそれを適応しようとしています。ここにコードを参照してください - 特に我々はJavaScriptをonkeyupを見ている：

これは動作します：

<label for="class">Classification</label> 
<input type="text" name="class" id="class" value="" required="true" placeholder="" style="text-transform:uppercase" onkeyup="javascript:this.value=this.value.toUpperCase();" /> 

これは動作しません：

<label for="judge">Judge's Name</label> 
<input type="text" name="judge" id="judge" value="" required="true" placeholder="" list="judges" style="text-transform:capitalize" onkeyup="javascript:this.value=this.charAt(0).toUpperCase() + this.substr(1);" /> 

Answer 1

あなたはちょうどあなたがする必要がある、valueプロパティを取得するために逃しましたcharAtとsubstrを、dom要素に直接接続しない文字列に適用します。

---

<label for="judge">Judge's Name</label> 
 
<input type="text" name="judge" id="judge" value="" required="true" placeholder="" list="judges" style="text-transform:capitalize" onkeyup="javascript:this.value=this.value.charAt(0).toUpperCase() + this.value.substr(1);" />

FYI：（text-transform:capitalizeを使用して）最初の文字を大文字にするオプションがあるのでは常に、それは、CSSを使用することをお勧めします。また、インラインスクリプトコードの代わりに関数を使用すると、読みやすく扱いやすくなります。

---

UPDATE： アン別のアドバイスは、はるかに良いかもしれHTML5のinputイベントの代わりkeyupを使用することです。

<label for="judge">Judge's Name</label> 
 
<input type="text" name="judge" id="judge" value="" required="true" placeholder="" list="judges" style="text-transform:capitalize" oninput="javascript:this.value=this.value.charAt(0).toUpperCase() + this.value.substr(1);" />

---

（@stdobがコメントしたように）また、あなたはそのフィールドに名前judgeと更新値で追加の隠された入力フィールドを追加することにより、矢印キーを移動の問題を回避することができますそれをサーバーに転送します。

function transform(ele) { 
 
    var hid = document.getElementById('judge'); 
 
    hid.value = 
 
    ele.value.charAt(0).toUpperCase() + ele.value.substr(1); 
 
}

<label for="judge">Judge's Name</label> 
 
<input type="text" value="" required="true" placeholder="" list="judges" style="text-transform:capitalize" onkeyup="transform(this)" /> 
 
<input type="hidden" name="judge" id="judge" value="" />