Kích hoạt trường nhập tiếp theo trong biểu mẫu khi nhập

Biểu mẫu nhập đơn hàng chứa cột mã sản phẩm và số lượng trong nhiều hàng và nút xóa (-) ở cuối mỗi hàng. Nó cũng chứa nút thêm trong cột đầu tiên và sau biểu mẫu.Kích hoạt trường nhập tiếp theo trong biểu mẫu khi nhập

Nhấn phím enter nên đặt tiêu điểm thành văn bản tiếp theo hoặc trường nhập số (mã sản phẩm hoặc số lượng), bỏ qua các nút.

Tôi đã thử mã bên dưới được sử dụng nhưng nhập khóa bị bỏ qua.

Trình gỡ lỗi Chrome cho biết dòng $(this).next('input').focus() được thực thi nhưng cuộc gọi focus() không có hiệu lực.

jquery, jquery-mobile, ASP.NET MVC4 được sử dụng

<!DOCTYPE html> 
<html> 
<head> 
    <script src="/Scripts/jquery/jquery-1.9.1.js"></script> 
</head> 
<body> 
    <div data-role="page" data-theme="a"> 
<div data-role="content"> 
<script> 
    $(function() { 
    $('#inputform').on('keydown', 'input', function (event) { 
     if (event.which == 13) { 
     $(this).next('input').focus(); 
     event.preventDefault(); 
     } 
    }); 
    }); 
</script> 
<form id='inputform' method="post" 
    action ="/Detail/SaveFullDocument?_entity=DokG&amp;_id=0"> 
    <fieldset> 
<div class='form-field' > 
<label class='form-label' for='Tasudok'>Order number</label> 
<input class='ui-widget-content ui-corner-all form-fullwidth' id='Tasudok' name='Tasudok' value='' maxlength='25' /></div> 

    <input type="hidden" name="_rows" /> 

    <table id="tableId"> 
    <tr> 
     <th>Product code</th> 
     <th>Quantity</th> 
     <td> 
     <input type="button" value="+" onclick="addRow('tableId')" /></td> 
    </tr> 

    <tr> 
     <td> 
     <input type="text" name="Toode" /></td> 
     <td> 
     <input type="number" name="Kogus" /></td> 
     <td> 
     <input type="button" value="-" onclick="deleteRow(this)" /></td> 
    </tr> 
    </table> 

    <input type="button" value="+" onclick="addRow('tableId')" /> 
    <input type="submit" value='Save order' /> 
</form> 

    </div> 
    </div> 
</body> 
</html>

Nguồn

2013-10-26 Andrus

Vấn đề là đầu vào tiếp theo là đôi khi một nút. Đây là một Fiddle JS với một giải pháp khả thi:

http://jsfiddle.net/hxZSU/1/

Tôi đã thêm một thuộc tính dữ liệu đến các yếu tố html đó là đầu vào cho người dùng. Thuộc tính này cũng chứa chỉ mục tăng dần để bạn có thể kiểm soát thứ tự của các phần tử nhận tiêu điểm.

Dưới đây là những thay đổi HTML:

<input class='ui-widget-content ui-corner-all form-fullwidth' data-index="1" id='Tasudok' name='Tasudok' value='' maxlength='25' /> 
<input type="text" name="Toode" class="my-input" data-index="2" /> 
<input type="number" name="Kogus" data-index="3" />

Đây là sự kiện JavaScript mới mà sẽ di chuyển giữa các trường nhập. Nó sẽ xác định chỉ mục của phần tử hiện đang được chỉnh sửa bằng cách sử dụng $ (event.target) .attr ('data-index'). Nó tăng chỉ mục và chọn phần tử tiếp theo bằng cách sử dụng nó.

$('#inputform').on('keydown', 'input', function (event) { 
    if (event.which == 13) { 
     event.preventDefault(); 
     var $this = $(event.target); 
     var index = parseFloat($this.attr('data-index')); 
     $('[data-index="' + (index + 1).toString() + '"]').focus(); 
    } 
});

Nguồn

2013-10-26 19:26:26 Sam

Không hoạt động trên iOS ... – tylerl

Kích hoạt trường nhập tiếp theo trong biểu mẫu khi nhập

Trả lời

Các vấn đề liên quan