带输入的jQuery手风琴，如何获取输入以不关闭手风琴&还能控制吗? [英] jQuery accordion w/input, how do you get the input to not close the accordion & still be able to control it?

问题描述

这更多地是我自己的概念证明，可以四处学习并了解我可以用jQuery做或不能做的事情，而我已经取得了部分成功.

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.

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

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.

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

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.

谢谢.

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

推荐答案

似乎可以在Chrome中正常工作.这可能取决于浏览器.

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"

在Chrome中也可以.

Also fine in Chrome.

这篇关于带输入的jQuery手风琴，如何获取输入以不关闭手风琴&还能控制吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！