Contenteditable="true" 无法正常使用 jQuery UI 选项卡

Question

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

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

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

Answer 1

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

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

Answer 2

jQuery UI Tabs listens to keydown event:

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

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

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

Contenteditable="true" 无法正常使用 jQuery UI 选项卡

Contenteditable="true" not working properly with jQuery UI Tabs

jquery

user-interface

contenteditable