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

jQuery UI Tabs listens to keydown event：

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

正如你可以看到，如果按下空格鍵，它調用event對象的preventDefault方法。您可以收聽​​事件並停止事件傳播：

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

Answer 2

這可能是一個解決辦法，但增加（CONTENTEDITABLE =真）W/jQuery的解決了這個問題。

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