2010-09-17 4 views
0

У меня есть интересная проблема, которую мне нужно решить. Клиент хочет ввести идентификатор клиента (используя сканер) во входном элементе и используя AJAX, он заполнит еще один элемент ввода именем клиента. Необходимо добавить новый элемент ввода и установить фокус, чтобы клиент мог ввести другой идентификатор клиента. У меня есть два вопроса, которые мне нужны для помощи. Во-первых, мне нужно захватить ввод, посланный сканером, и перейти к вновь добавленному элементу ввода. Во-вторых, мне нужно добавить события к новому элементу ввода для обработки вызова AJAX, а следующий ввод - от сканера. Любая помощь будет принята с благодарностью.Добавление кнопок ввода с помощью JQuery

Wade

+0

Сканер = аппаратное периферийное устройство? Итак, вы не можете понять, как получить код сканера в html? –

+0

Сканер - это не что иное, как эмулятор клавиатуры, но он отправляет ключ ввода после того, как он отправляет ключи для сканируемого штрих-кода. Моя проблема в том, что мне нужно обработать ключ ввода, чтобы вызвать другой код. – Wade73

ответ

1

Вот довольно простой шаблон, вы можете работать с:

<form> 
    <fieldset> 
     Customer ID: <input name="id" /> 
     Customer Name: <input name="name" /> 
    </fieldset> 
</form>​​​​​​ 

с Ja vascript:

​jQuery(function($) { 
    var form = $('form'), 
     fieldset; // defined here but set below after we get our event attached 

    $('input[name=id]').keyup(function(e) { 
     if(e.keyCode === 13) { 
      var clone = fieldset.clone(true).appendTo(form); 

      clone.children('input[name=id]').focus(); 

      $.get('getCustomerName.php', {id: this.value}, function(data) { 
       clone.children('input[name=name]').val(data); 
      }); 
     } 
    }); 

    fieldset = $('fieldset').clone(true); // clones our fieldset template with events 
});​ 
+0

Как реализовать функцию, показанную выше? Я все еще новичок в JQuery, поэтому я почти всегда добавлял функции с готовым событием. – Wade73

1

@ Wade73, добавив новый элемент управления является легкий бит. Вам нужно будет выбрать элемент для размещения элемента управления внутри или хотя бы.

$('#PlaceButtonIn').appendTo("new button html"); 
$('#PlaceButtonIn').append("new button html"); 

#PlaceButtonIn может быть DIV или тд или что-то полезное, чтобы поместить новый элемент управления в.

Новые элементы управления не имеют событий, поэтому используйте живую порекомендует это.

$('#PlaceButtonIn').append("<input type='button' class='NewButton'>"); 

$(document).ready(function(){ 

    $('.NewButton').live('click', function() { //Do click event here }); 

}); 

Класс NewButton не обязательно должен существовать в вашем CSS. Удобный способ использования селектора jQuery, если вы не знаете контрольные идентификаторы или имена.

Надеюсь, это полезно.

+0

Похоже, это может быть то, что мне не хватает. – Wade73

1

Может быть, это может ответить на ваши сомнения:

Когда вход получает фокус

$('#inputId').focus(function(){ 

     ///your code here 
    }); 

Или

$('#inputId').keypress(function(e) { 
    if(e.keyCode == 13) { 
     //your code here 
    } 
}); 
Смежные вопросы