选择最后一个非只读输入jQuery

Question

我需要选择最后一个没有readonly 属性的输入。

我尝试过input:last:not([readonly]) 和input:not([readonly]):last，但似乎不起作用。

有什么想法吗？

编辑：

正如您向您报告的那样，它可以在您的 JS Fiddle 上进行测试，代码如下 (JS Fiddle here)：

当您在表格中的输入上按Enter键时，应该将焦点设置在下一个输入上，但是当它是最后一个非只读输入时，我需要将焦点设置在带有Barcode标签的输入上.

HTML

Barcode: <input name="barcode" type="text" id="formInput_91" class="form-control" value="" autocomplete="off">

<br>
<table id="table_invoiceProducts" class="table">
   <thead>
      <tr>
         <th>Article</th>
         <th>Descriptio</th>
         <th>Price</th>
         <th>Tax</th>
         <th>Qty</th>
         <th>Subtotal</th>
         <th>Total</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td><input type="text" style="border: none; width: 32px;" name="product[1543338984947183200][productId]" class="adjustInputWidth input_productId" value="456" readonly=""></td>
         <td><input type="text" style="border: none; width: 40px;" name="product[1543338984947183200][description]" class="adjustInputWidth input_description" value="Test"></td>
         <td><input type="number" style="border: none; width: 58px;" name="product[1543338984947183200][price]" class="adjustInputWidth input_priceUnit" data-id="1543338984947183200" value="25.00" min="0" step="0.01"></td>
         <td><input type="number" class="adjustInputWidth input_tax" style="border: none; width: 50px;" data-id="1543338984947183200" value="0.00" name="product[1543338984947183200][tax]"></td>
         <td><input type="number" value="1" min="1" style="border: none; width: 26px;" data-id="1543338984947183200" class="input_quantity adjustInputWidth" name="product[1543338984947183200][quantity]"></td>
         <td><span style="color:#000;" class="span_priceSubTotal" data-id="1543338984947183200">25.00</span></td>
         <td><span style="color:#000;" data-id="1543338984947183200" class="span_priceTotal">25.00</span></td>
      </tr>
      <tr>
         <td><input type="text" style="border: none; width: 40px;" name="product[1543338991430875154][productId]" class="adjustInputWidth input_productId" value="1234" readonly=""></td>
         <td><input type="text" style="border: none; width: 104px;" name="product[1543338991430875154][description]" class="adjustInputWidth input_description" value="Product"></td>
         <td><input type="number" style="border: none; width: 58px;" name="product[1543338991430875154][price]" class="adjustInputWidth input_priceUnit" data-id="1543338991430875154" value="50.00" min="0" step="0.01"></td>
         <td><input type="number" class="adjustInputWidth input_tax" style="border: none; width: 50px;" data-id="1543338991430875154" value="0.00" name="product[1543338991430875154][tax]"></td>
         <td><input type="number" value="1" min="1" style="border: none; width: 26px;" data-id="1543338991430875154" class="input_quantity adjustInputWidth" name="product[1543338991430875154][quantity]" readonly=""></td>
         <td><span style="color:#000;" class="span_priceSubTotal" data-id="1543338991430875154">50.00</span></td>
         <td><span style="color:#000;" data-id="1543338991430875154" class="span_priceTotal">50.00</span></td>
      </tr>
   </tbody>
</table>

JS

    $( document ).ready(function() {

        $('#table_invoiceProducts').on('keydown', 'input:not(:last)', function(e){
            var keyCode = e.keyCode || e.which; 
            if(keyCode == 9 || keyCode == 13){
                e.preventDefault();
                $('#table_invoiceProducts input:not([readonly])')[$('#table_invoiceProducts input:not([readonly])').index(this)+1].focus();
                $('#table_invoiceProducts input:not([readonly])')[$('#table_invoiceProducts input:not([readonly])').index(this)+1].select();
            }
        });

        $('#table_invoiceProducts').on('keydown', 'input:not([readonly]):last', function(e){
            var keyCode = e.keyCode || e.which; 
            if(keyCode == 9 || keyCode == 13){
                e.preventDefault();
                $( '#formInput_91' ).focus();
            }
        });
    });

Answer 1

$("input").filter(':not([readonly])').last()

示例：https://codepen.io/filipemansano/pen/PxdmoW

Answer 2

睡了30分钟后，我一下子就找到了解决办法。

正如您所指出的，只需 input:not([readonly]):last 即可。那么，为什么它对我不起作用？

我的问题是因为最后一个非只读输入受到问题详细信息上发布的两个事件的影响。一个在您在最后一个非只读输入上按 Enter 时触发，另一个在任何非最后一个输入上按 Enter 时触发。

所以解决方案是简单地选择所有不是readonly 并在检查它是否是最后一个之后更改行为。

JS 小提琴：http://jsfiddle.net/60x47pu1/3/

基本上，我替换了为此发布的 JS 代码：

$('#table_invoiceProducts').on('keydown', 'input:not(:last)', function(e){
    var keyCode = e.keyCode || e.which; 
    if(keyCode == 9 || keyCode == 13){
        e.preventDefault();

        if ($('#table_invoiceProducts input:not([readonly])').length == $('#table_invoiceProducts input:not([readonly])').index(this)+1){
            $( '#formInput_91' ).focus();
        }
        else
        {
            $('#table_invoiceProducts input:not([readonly])')[$('#table_invoiceProducts input:not([readonly])').index(this)+1].focus();
            $('#table_invoiceProducts input:not([readonly])')[$('#table_invoiceProducts input:not([readonly])').index(this)+1].select();
        }          
    }
});

题外话：记得睡个好觉。