Contenteditable =“true”与jQuery UI选项卡无法正常工作

Question

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

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

<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();
    // ...

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

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