Связывание элементов ввода с определенными кнопками в форме?

Question

http://jsfiddle.net/EGjc9/

У меня есть несколько элементов <button> на странице, и мне нужно связать элементы <input>, ближайшие к ним, для этих кнопок. Прямо сейчас, когда вы нажимаете ENTER в любом поле ввода, оно запускает первый <button> в форме. Как мне это изменить?

DOM:

<form action="irrelevant">
<div>
<select><option>1</option><option>2</option><option>3</option></select>
    <input type='text'/>
    <button>Hello</button>
</div>
<div>
    <select><option>1</option><option>2</option><option>3</option></select>
    <input type='text'/>
    <button>Hello</button>
</div>
<div>
    <select><option>1</option><option>2</option><option>3</option></select>
    <input type='text'/>
    <button>Hello</button>
</div>
<div>
    <select><option>1</option><option>2</option><option>3</option></select>
    <input type='text'/>
    <button>Hello</button>
</div>
</form>

DOM Ready:

$('button').click( function(){ 
$(this).siblings().filter('select').val('3');
    return false;
});

Answer 1

Вам нужно использовать событие KeyPress, чтобы поймать нажатие клавиши «Ввод», а затем нажать нужную кнопку, используя JavaScript.

Например:

//some key is pressed
$('input').keypress( function(event){ 
   //is this "Enter"?
   if (event.keyCode == '13') {
     //finding the button inside the same <div> and clicking on it
     $(this).parent().find('button').click();
     //we don't need a default action
     event.preventDefault();
   }
});

Answer 2

как то так:

$('input').bind('keypress', function(e){
     if(e.which == 13) { //Enter keycode
       $(this).next().click()
     }
     return false;
});

скрипка