jquery:$(input）.keydown无法在单选按钮上设置处理程序，同样的代码也适用于文本

jquery: $(input).keydown fails to set handler on radio button, same code works for text

本文关键字：程序 处理 文本 适用于 代码 设置 input keydown 单选按钮 jquery      更新时间：2023-09-26

我有一个长表单，它被分解为jquery手风琴面板中的部分。当用户在一个面板中填写完表格后，他们会转到下一个面板并在那里填写表格。手风琴把长形的手风琴分成几步。但是，当用户在一个面板上完成最后一次输入时，按下tab键不会将他们带到下一个面板中的下一个字段，除非我是通过程序进行的。对于类型为text的输入，以下代码运行良好。但是，在输入是类型无线电的情况下，它不起作用。以下代码首先将keydown功能分配给一个文本框，然后未能将其分配给一组三个单选按钮，然后再次成功将其分配到一个文本盒。

令人沮丧的是，如果我将中间块复制并粘贴到chromejavascript控制台中，那么它就会像一个魅力一样工作。

那么，问题出在哪里呢？

document.onReady(function(){
            $('#f-phone').keydown(function(e){
                 var code = e.keyCode || e.which;
                 if ( code === 9) {
                 my_accordion.accordion("option", "active", 3);
                 }
             });
            $('input[name=shipping_method]').keydown(function(e){
                 var code = e.keyCode || e.which;
                 console.log('code is '+code);
             });
            $('#f-special_instructions').keydown(function(e){
                 var code = e.keyCode || e.which;
                 if ( code === 9) {
                 my_accordion.accordion("option", "active", 5);
                 }
             });
});

HTML如下：

<div class="row">
  <label class="req" for="f-shipping_phone" id="label-shipping-phone">Phone (Recipient)<span style="color:red;">*</span> </label>
  <input type="text" name="shipping_phone"  size="35" maxlength="35" autocomplete="telephone-full" class="addr_phone" id="f-shipping_phone" />
</div>
<h2 id="ship-options" id="h2_shipping">Shipping Options</h2>
<div class="rowSet" id="checkout-shipping-level">
<div class="row" id="shipping_type">
    <table cellpadding="0" cellspacing="0" style="width:300px">
    <caption>Times are estimates once shipped.</caption>
    <tr align="center" valign="top">
    <td>
    <input name="shipping_method" type="radio" value="4" id="ship4" >
    </td> <td>
    <label for="ship4">Standard</label>
    </td>
    </tr>
    <tr align="center" valign="top">
    <td>
    <input name="shipping_method" type="radio" value="7" id="ship7" checked="checked">
    </td> <td>
    <label for="ship7">Saver</label>
    </td>
    </tr>
    <tr align="center" valign="top">
    <td>
    <input name="shipping_method" type="radio" value="2" id="ship2" >
    </td> <td>
    <label for="ship2">Expedited</label>
    </td>
    </tr>
    </table>
</div>

以下是更新后的jQuery脚本：

$(document).ready(function(){
$('#f-phone').keydown(function(e){
    var code = e.keyCode || e.which;
    if ( code === 9) {
        my_accordion.accordion("option", "active", 3);
    }
});
$('input:radio[name=shipping_method]').keydown(function(e){
    var code = e.keyCode || e.which;
    console.log('code is '+code);
    alert('code is '+code);
});
$('#f-special_instructions').keydown(function(e){
    var code = e.keyCode || e.which;
    if ( code === 9) {
        my_accordion.accordion("option", "active", 5);
    }
}); });

你可以在fiddler中查看：在这里

您只将"keydown"事件附加到单选按钮。您还可以将"点击"或"更改"事件附加到单选按钮上。

我注意到，即使我通过javascript控制台应用处理程序，它也会在关闭手风琴面板时消失。因此，正如一位评论者所发布的那样，我相信除非它在不同的级别处理击键，否则没有解决方案。

相关文章：