I have jQuery UI accordion with input box on header:

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

/

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?

I have jQuery UI accordion with input box on header:

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

http://jsfiddle/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?

• javascript
• jquery
• jquery-ui

• I don't understand your question. I'm able to enter input into the text field fine. – j08691 Commented Sep 12, 2013 at 16:24
• Check this question and the answer stackoverflow./questions/5511785/… – Marko Commented Sep 12, 2013 at 16:24
• Yes, I'm able to enter some text into the text box, but it's not possible to enter space; and to use arrow keys to navigate within text. Arun's answer solves this problem. – user1702401 Commented Sep 12, 2013 at 16:55

3 Answers 3

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

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

The below code worked well for me:

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