jQuery手风琴w /输入，你如何得到输入不关闭手风琴，仍然能够控制它？

这更像是我自己的一个概念验证，可以让我知道我可以做什么，不能做什么，我已经取得了部分成功。jQuery手风琴w /输入，你如何得到输入不关闭手风琴，仍然能够控制它？

我创建了一个包含两个跨，其中作为名称和描述，以及一个按钮，分别是点击的手风琴（即，它不会打开或关闭手风琴。）

采取这一概念，我决定尝试通过将名称和描述跨度转换为文本输入/文本区域来实现名称和描述的可编辑性，这些文本输入/文本区域运行良好。然而

的问题是，当我把我在按钮上使用相同的技术，并使用它的输入和textarea的，点击它不允许你将光标移动到不同的位置。似乎没有办法让我解决这个问题。

我试过event.preventDefault（），这并不在所有的工作。我试过event.stopPropagation（），它给出了部分工作行为。我试着返回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; 
    }); 
});

来源

2011-10-05 Rakshasas

似乎在Chrome中正常工作。这可能与浏览器有关。

enter image description here

“点击输入不关闭手风琴，但它也不允许你将光标定位到”

也蛮好的Chrome。

来源

2011-10-05 17:13:50 EKet

人，我可以证实。刚刚尝试过铬，它很好。我一直在使用Firefox 7.0.1，但我也只是在Internet Explorer 9中尝试过它，它似乎也不能在那里工作。 – Rakshasas

可能有一些tweeks你可以做，使其兼容，但jquery支持根据他们的网站目前几个浏览器。所以这并不意外，但令人失望。 http://docs.jquery.com/Browser_compatibility – EKet

如果有人正面临着这个问题，这是为我工作的一个小动作。

问题：与输入/文本域的元素嵌套的jQuery手风琴，无法在Firefox获得焦点的正常点击（如果它使用jquery手风琴没有嵌套手风琴，一切工作正常）。上述用户确认。

的sympton仅涉及正常的单击（左单击）。如果您尝试可选点击（右键单击），元素（input/textarea）将获得焦点。奇怪的。

SOLUTION：您的文档准备功能

$(function() { 

    //some code ... 

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

    //more code ... 

});

证明（通过我）对IEXPLORER，火狐和Chrome的工作中就声明这一点。

来源

2012-08-10 03:25:35 jquinter

谢谢，它的工作原理。但我不明白如何将其应用于'select'输入？ –

jQuery手风琴w /输入，你如何得到输入不关闭手风琴，仍然能够控制它？

回答

相关问题