Активация следующего поля ввода в форме при вводе

Форма заказа заказа содержит коды товаров и количества в нескольких строках и кнопку удаления (-) в конце каждой строки. Он содержит также кнопку добавления в первом столбце и после формы.Активация следующего поля ввода в форме при вводе

Нажатие клавиши ввода должно установить фокус на следующее текстовое или числовое поле ввода (код продукта или количество), кнопки пропуска.

Я пробовал использовать код ниже, но вводить ключ игнорируется.

Отладчик Chrome показывает, что выполняется линия $(this).next('input').focus(), но вызов focus() не имеет никакого эффекта.

JQuery, JQuery-мобильный, ASP.NET MVC4 используются

<!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>

источник

2013-10-26 Andrus

Проблема заключается в том, что следующий входной иногда кнопка. Вот JS Fiddle возможным решением:

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

Я добавил атрибут данных в HTML-элементы, которые являются входными для пользователя. Атрибут также содержит инкрементирующий индекс, чтобы вы могли контролировать порядок элементов, получающих фокус.

Вот изменения 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" />

Вот новое событие JavaScript, который будет перемещаться между полями ввода. Он определит, что индекс элемента в настоящее время редактируется с помощью $ (event.target) .attr ('data-index'). Он увеличивает индекс и выбирает следующий элемент, используя это.

$('#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(); 
    } 
});

источник

2013-10-26 19:26:26 Sam

Не работает на iOS ... – tylerl

Активация следующего поля ввода в форме при вводе

ответ

Смежные вопросы