Question

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

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

有什么想法吗？

编辑：

正如您所报告的那样，它对您有效，并且我对其进行了测试，可在您的JS Fiddle上运行，这是代码（JS Fiddle here）：

当您在表中的输入上按Enter键时，应该将焦点放在下一个输入上，但是当它是最后一个非只读输入时，我需要使用{{1}来将焦点放在输入上}标签。

HTML

Barcode

JS

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>

Answer 1

uint8_t

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

Answer 2

睡了30分钟后，我突然发现了解决方法。

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

我的问题是因为最后一个非只读输入受到问题详细信息上发布的两个事件的影响。在上一个非只读的最后一次按下回车键时触发的事件，而在最后一个非最后一个输入上按下回车键时触发的事件。

因此解决方案只是选择所有非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();
        }          
    }
});

题外话：记住睡个好觉。

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

2 个答案: