如何選擇內容可編輯而不失去焦點？

Question

每次按Tab鍵時，它都會把焦點放在桌子上，而不是插入空格。 如何解決它，以便制表符僅插入常規制表符空間？

Answer 1

使用jQuery您可以執行以下操作：

$('[contenteditable]').on('keydown', function(e) {
  if(e.which === 9){
    e.preventDefault();
    $(this).html($(this).html() + '&#009'); //insert tab character
  }
})

確保您的css為

[contenteditable] {
  white-space : pre-wrap;
}

不幸的是，這僅僅是基礎。 因為如果您的光標不在文本的末尾，那么事情就搞砸了。 您應該獲得光標位置，然后在該位置插入標簽。

為了解決這些問題，您需要花費更多的事件處理程序：

$('[contenteditable]').on('keydown', function(e) {
  if (e.which === 9) {
    //prevent from tabbing out 
    e.preventDefault();

    var ce = this;
    var $ce = $(ce);
    var html = $ce.html();
    var textNode = ce.firstChild;
    var range = document.createRange();
    var position = getSelection().getRangeAt(0).startOffset;

    //place tab at cursor position
    $ce.html([html.slice(0, position), '&#009', html.slice(position)].join(''));

    //reset cursor position and place it after the tab
    ce.focus();
    range.setStart(textNode, position + 1);
    range.setEnd(textNode, position + 1);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
  }
});

這會將選項卡放置在正確的位置，並重置光標。

您可以在這里看到一個正在工作的小提琴。 但是請注意，這非常基本，很可能僅適用於chrome。 對於其他瀏覽器支持，您應該自己了解一下。 同樣，以制表符開頭和結尾的極端情況在此將失敗，但這將使您在正確的方向上稍作調整

Answer 2

使用以下代碼。 我沒有測試過，但是應該可以正常工作。

jQuery(document).ready(function(){
    document.addEventListener("keydown", function(event) {
      if(event.which == 9)
      {
         jQuery(this).val(jQuery(this).val()+""+&#009);
      }

    }
});