带输入的 jQuery 手风琴，如何获取输入而不关闭手风琴 &还能控制吗？

Question

这更多的是对我自己的一个概念证明，闲逛并学习我能用 jQuery 做什么和不能做什么，并且我已经取得了部分成功。

我创建了一个手风琴，其中包含两个范围，用作名称和描述，以及一个可独立单击的按钮（即，它不会打开或关闭手风琴。）

采用这个概念，我决定尝试制作通过将名称和描述跨度转换为文本输入/文本区域，可以编辑名称和描述，效果相当好。

然而问题是，当我采用在按钮上使用的相同技术并将其用于输入和文本区域时，单击它不允许您将光标移动到不同的位置。我似乎没有办法绕过这种行为。

我尝试了 event.preventDefault()，它根本不起作用。 我尝试了 event.stopPropagation()，它给出了部分工作行为。 我尝试 return false，其工作方式与 stopPropagation 相同。

我想知道是否有人可以提供有关此问题的任何见解。

我在下面包含了 jQuery javascript，但为了更简洁的示例，我将在此处提供 jsfiddle 链接 (http:// jsfiddle.net/Rakshasas/xFhN3/），它为您提供了我正在做的事情的更清晰的示例。请注意，当您单击手风琴将其展开时，跨度将被隐藏并显示输入。单击输入不会关闭手风琴，但也不允许您定位光标。

另外，如果您确实尝试更改输入中的文本，关闭手风琴确实会更新跨度，这是预期的结果。这就是为什么我说我的概念部分有效。

谢谢。

$(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;
    });
});

Answer 1

如果有人面临这个问题，这是一个对我有用的小技巧。

问题：带有 input/textareas 元素的嵌套 jquery 手风琴，无法在 Firefox 中通过正常单击获得焦点（如果您使用没有嵌套手风琴的 jquery 手风琴，则一切正常）。经上述用户确认。

该症状仅与正常单击（左键单击）有关。如果您尝试选择性单击（右键单击），则元素（输入/文本区域）将获得焦点。诡异的。

解决方案：只需在您的文档就绪函数中声明这一点

$(function() {

    //some code ...

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

    //more code ...

});

（由我确认）可在 IExplorer、Firefox 和 Chrome 上运行。

Answer 2

似乎在 Chrome 中运行良好。这可能取决于浏览器。

“单击输入不会关闭手风琴，但也不允许您定位光标”

在 Chrome 中也很好。