jQuery accordion w/input, how do you get the input

This is more of a proof of concept for myself, to fool around and learn what I can and can't do with jQuery, and I have had partial success.

I created an accordion that contains two spans, which serve as name and description, as well as a button that is independently click-able (ie, it does not open or close the accordion.)

Taking that concept, I decided to try and make the name and description editable by turning the name and description spans into text inputs / text areas, which worked fairly well.

The problem however is that when I take the same technique I used on the button and use it on the input and textarea, clicking it does not allow you to move the cursor to different positions. There does not seem to be a way for me to get around this behavior.

I tried event.preventDefault(), which does not work at all. I tried event.stopPropagation(), which gives the partially working behavior. and I tried return false, which worked the same way as stopPropagation.

I was wondering if anyone could provide any insight on this issue.

I included the jQuery javascript below, but for a much more concise example I will provide a jsfiddle link here (http://jsfiddle.net/Rakshasas/xFhN3/) which gives you a much more clear example of what I am doing. Note that when you click the accordion to expand it, the spans are hidden and inputs are shown. Clicking the inputs does not close the accordion, but it also does not allow you to position the cursor.

Also, if you do attempt to change the text in the inputs, closing the accordion does indeed update the spans which is the intended result. This is why I am saying my concept partially works.

Thank you.

$(function() {
    $(".accordion").accordion({
        header: 'h3',
        collapsible: true,
        active: false,
        change: function(event, ui) {
            var id = ui.newHeader.find('input:last').val();
            $("#status").text(id);

            ui.newHeader.find('div.headerContainer input.name').val(ui.newHeader.find('div.headerContainer span.name').text());
            ui.newHeader.find('div.headerContainer textarea.desc').val(ui.newHeader.find('div.headerContainer span.desc').text());

            ui.oldHeader.find('div.headerContainer span.name').text(ui.oldHeader.find('div.headerContainer input.name').val());
            ui.oldHeader.find('div.headerContainer span.desc').text(ui.oldHeader.find('div.headerContainer textarea.desc').val());

            ui.newHeader.find('div.headerContainer span').hide();
            ui.newHeader.find('div.headerContainer input, div.headerContainer textarea').show();

            ui.oldHeader.find('div.headerContainer span').show();
            ui.oldHeader.find('div.headerContainer input, div.headerContainer textarea').hide();
        }
    });

    $('input.name, textarea.desc').click(function(event){
        event.stopPropagation();
    });

    $(".delButton").button({
        icons: {primary: 'ui-icon-trash'},
        text: false
    }).click(function(event) {
        //Display user friendly text
        return false;
    });
});

回答1:

Seems to work fine in Chrome. This might be browser dependent.

"Clicking the inputs does not close the accordion, but it also does not allow you to position the cursor"

Also fine in Chrome.

回答2:

If someone is facing this issue, this is a little trick that worked for me.

PROBLEM: nested jquery accordions with input/textareas elements, cannot gain focus with normal click in Firefox (if you use jquery accordions with NO nested accordions on it, everything works fine). Confirmed by above users.

The sympton relates only to normal click (left click). If you try optional click (right click), the element (input/textarea) WILL gain focus. Weird.

SOLUTION: Just declare this in your document ready function

$(function() {

    //some code ...

    $("input, textarea").click( function(){
        $("input, textarea").blur();
        $(this).focus();
    }); 

    //more code ...

});

Confirmed (by me) working on IExplorer, Firefox and Chrome.