JavaScript Conundrum

Question

JavaScript機能を入力タグから<script>タグまで移動したいが、機能しない。

これは動作します：

<input type="text" name="aaa" id="aaa" onkeyup="javascript:this.value= 
    this.value.substring(0,1).toUpperCase()+ 
    this.value.substring(1,this.value.length); 
    if (this.value=='') 
    document.getElementById('aaaLabel').innerHTML='AAA';" 
/> 

これにはない：

<script type="text/javascript"> 
    function FieldOnKeyUp() { 
    this.value=this.value.substring(0,1).toUpperCase()+ 
     this.value.substring(1,this.value.length); 
    if (this.value=='') 
     document.getElementById('aaaLabel').innerHTML='AAA'; 
    } 
</script> 

---

<input type="text" name="aaa" id="aaa" onkeyup="FieldOnKeyUp()"> 

違いは何ですか？

Answer 1

thisの値は、別の機能に渡されません。実際には、関数内のthisがwindowオブジェクトに設定されています。あなたの関数に正しい値を渡すために、コードのこのタイプに変更する必要があります。

<input type="text" name="aaa" id="aaa" onkeyup="FieldOnKeyUp(this)"> 

、これまであなたのコード：

<script type="text/javascript"> 
function FieldOnKeyUp(el) { 
    el.value=el.value.substring(0,1).toUpperCase()+el.value.substring(1); 
    if (el.value=='') { 
     document.getElementById('aaaLabel').innerHTML='AAA'; 
    } 
} 
</script> 

ここでは、このコードの動作を示すサンプルです：http://jsfiddle.net/jfriend00/2dJ6x/ 。