如何在點擊HTML後保持選擇？

我編碼一個所見即所得的編輯器（不能使用類似TinyMCE的東西 - 必須自己編碼），我希望用戶能夠通過向HTML添加標籤來將文本設置爲粗體，下劃線，鏈接等。我得到的問題是，當用戶選擇可編輯的div中的文本，然後單擊「加粗」按鈕時，它無法找到選擇，因爲它已被取消選擇，因爲發生了點擊事件。我怎樣才能阻止呢？有一個更好的方法嗎？如何在點擊HTML後保持選擇？

來源

2011-10-22 Thomas Denney

此功能可以幫助您：

jQuery.fn.getSelectedText = function() { 
    var sSelectedText = ""; 
    // all browsers, except IE before version 9 
    if (window.getSelection) { 
     var sTagName = this.get(0).tagName.toLowerCase(); 
     sSelectedText = (
      sTagName == 'input' || sTagName == 'textarea' ? 
      this.val().substring (
       this.get(0).selectionStart 
       , this.get(0).selectionEnd 
      ) : 
      document.getSelection().toString() 
     ); 
    } 
    // Internet Explorer before version 9 
    else { 
     if (document.selection.createRange) { 
      sSelectedText = document.selection.createRange().text; 
     } 
    } 
    return sSelectedText; 
}

也看到我的jsfiddle。

=== UPDATE ===

如果您的按鈕是不是<input type="button/submit" ... />或<button ...>，你要記住每次點擊後選擇的文本：

var sSelectedText = ''; 
$('body').click(function() { 
    sSelectedText = $('#text').getSelectedText(); 
}); 
$('body').dblclick(function() { 
    sSelectedText = $('#text').getSelectedText(); 
});

在按鈕單擊選定文本在sSelectedText：

$('#button').click(function(e) { 
    alert(sSelectedText); 
});

另請參閱我的新jsfiddle。

來源

2011-10-22 10:58:35 scessor

這有什麼用？ –

@TimDown好的，對不起，沒有閱讀完整的問題。該按鈕似乎不是''或'

一個想法是跟蹤選擇（通過聽mouseup事件），以便您的代碼知道什麼是突出顯示在給定的時刻，所以你可以做一些事情，當點擊按鈕...

This article有一些很好的代碼示例。

來源

2011-10-22 10:22:16 Hoff

您需要使按鈕不可選，這可以在大多數瀏覽器中使用CSS和IE和Opera中的unselectable屬性完成。具體方法如下：

How to disable text selection highlighting using CSS?

來源

2011-10-22 10:52:24

我認爲這是最好的解決方案，因爲它實際上保持了選定的文本，而不是將它保存在內存中。 – smfoote

另一種可能更好的方法是在'mousedown'事件中爲'Bold'按鈕調用'preventDefault（）'（當選擇被清除時 - 至少在Chrome中）：

$('div.boldButton').mousedown(function(event) { 
    event.preventDefault(); 
});

來源

2013-08-21 17:59:48

幾乎整齊。有時它可能不起作用，在這種情況下，而不是'event.preventDefault（）'，你只需調用'return false;'.. – SexyBeast

如何在點擊HTML後保持選擇？

回答

相關問題