Contenteditable="true" 无法与 jQuery UI 选项卡一起正常工作答案

【问题标题】：Contenteditable="true" not working properly with jQuery UI TabsContenteditable="true" 无法与 jQuery UI 选项卡一起正常工作
【发布时间】：2015-04-04 01:26:47
【问题描述】：

由于某种原因，当我在 jQuery UI 选项卡上具有 contenteditable 时，我无法在字母之间添加空格。您可以添加文本和删除，但我不能添加空格。看这里http://codepen.io/anon/pen/ByEEQe

单击选项卡中的文本并尝试添加空格。

<a href='#tab-2'><span contenteditable="true">THIS ALSO IS TAB</span></a>

【问题讨论】：

标签： jquery user-interface contenteditable

【解决方案1】：

这可能是一种解决方法，但添加 (contenteditable = true) w/jQuery 可以解决问题。

$("#sidebar-canvas-content").attr('contenteditable','true');

【讨论】：

【解决方案2】：

jQuery UI Tabs listens to keydown event:

_tabKeydown: function( event ) {
    // ...
    case $.ui.keyCode.SPACE:
        // Activate only, no collapsing
        event.preventDefault();
    // ...

如您所见，如果按下空格键，它会调用event 对象的preventDefault 方法。您可以监听keydown 事件并停止该事件的传播：

$("#sidebar-canvas-content")
   .tabs()
   .find('.sidebar-tab span[contenteditable]').on('keydown', function(event) {
       event.stopPropagation();    
   });

【讨论】：