jQuery UI Accordion Header中的输入框

Question

I have jQuery UI accordion with input box on header:

<h3><input type="text" /></h3>

http://jsfiddle.net/7VN8h/

As expected, Accordion catches all space and arrow keypresses, that take place within header - so it's not possible to write into input box correctly. Is there any way to get rid from this behaviour, and use space and arrows, when typing there?

Answer 1

You can stop the propagation of key events from the input control

$(function () {
    $("#accordion").accordion();

    $("#accordion h3 input").on('keydown', function (e) {
        e.stopPropagation();
    })
});

Demo: Fiddle

Answer 2

If you're looking to be able to enter input into the text field without triggering the accordion element, add this:

$('input').click(function (e) {
    e.stopPropagation();
});

jsFiddle example

Answer 3

The below code worked well for me:

$('#TSResultContent input[type="textbox"]').keydown(function (e)  {
    e.stopPropagation();
});