JSPで "onKeyPress"を実装する方法は？

Question

私は以下の要件を持っています：

私のウェブページには、「国」と書かれたテキストボックスがあります。 Countryのテキストボックスに何かを入力すると、「City」と表示された別のテキストボックスが表示されます。国のテキストボックスに何も入力しなければ、「City」は表示されません。

私は「国」の入力を取って、次のJSPがあります

<td width="20%"> 
    <s:label key="partner.Country" cssClass="Labels"></s:label> 
    <font color="#FF0000">*</font> 
</td> 
<td width="20%"> 
    <s:textfield id="id_PartnerNameRecv" name="partnerDetails.partnerNameRecv" cssClass="Rectangle-1-Copy-4">onchange="tnKeyPressForCity(this.value)"</s:textfield> 
</td> 

function tnKeyPressForCity(radioButtonObj){ 
    var keyPressed =radioButtonObj; 
    if (keyPressed != ""){ 
     $('#id_CityRecv').show(); 
    } 
} 

は、私は上記の機能を実装する方法について確認していません。これが私の機能を作り出す方法です。

Answer 1

.show()/hide()の代わりに.addClass()と.removeClass()を使ってみてください。

<td width="20%"> 
    <s:label key="partner.Country" cssClass="Labels"></s:label> 
    <font color="#FF0000">*</font> 
</td> 
<td width="20%"> 
    <s:textfield id="id_PartnerNameRecv" name="partnerDetails.partnerNameRecv" cssClass="Rectangle-1-Copy-4"></s:textfield> 
</td> 

JS、

$("#id_PartnerNameRecv").on('keypress', function(){ 

    var keyPressed = $(this).val(); 
    if (keyPressed != ""){ 
     $('#id_CityRecv').addClass('show'); 
    }else{ 
     $('#id_CityRecv').removeClass('show'); 
    } 

}); 

CSS、[JSPでキー押下を検出]の

.show{ 
    display: block; 
} 
#id_CityRecv{ 
    display: none; 
}