Как выделить весь текст в contenteditable div?

Прежде чем это будет помечено как дубликат, я хочу, чтобы вы осознали, что на самом деле никто не дал хорошего ответа на этот конкретный вопрос. В выберите весь текст в contenteditable div, когда он фокусируется / щелкает, принятый ответ и ответ Тима Дауна бесполезны, поскольку они работают только тогда, когда элемент уже сфокусирован. В моем случае я хочу, чтобы весь текст в contenteditable div был выбран после нажатия кнопки, даже если div не был сфокусирован заранее.

Как я мог это сделать?


javascript html jquery contenteditable
person Lucas    schedule 03.09.2012    source источник

Ответы (5)


arrow_upward
60
arrow_downward

Я использовал код из этой ветки придумать свой ответ. Это 100% jQuery, как вы и просили. Надеюсь, вам понравится :)

jQuery.fn.selectText = function(){
   var doc = document;
   var element = this[0];
   console.log(this, element);
   if (doc.body.createTextRange) {
       var range = document.body.createTextRange();
       range.moveToElementText(element);
       range.select();
   } else if (window.getSelection) {
       var selection = window.getSelection();        
       var range = document.createRange();
       range.selectNodeContents(element);
       selection.removeAllRanges();
       selection.addRange(range);
   }
};

$("button").click(function() {
    $("#editable").selectText();
});​

Ссылка jsfiddle.

person Tom Oakley    schedule 03.09.2012
comment
Какая совместимость браузера по этому поводу? - person crush; 20.12.2013
comment
Fiddle работает в FF 28, но не работает для contenteditable элементов ввода с темой ОС (CSS appearance). Вы можете добавить element.focus(); к функции selectText(), или она выберет текст без того, чтобы курсор был в этом поле. - person CodeManX; 02.05.2014
comment
Просто предложение, удалите строку console.log (this, element) ;, так как это не обязательно для работы. - person Wagner Bertolini Junior; 24.10.2016

arrow_upward
13
arrow_downward

Например, в следующем сценарии, если пользователь установил фокус на редактируемый блок (с помощью мыши, клавиатуры или щелкнув кнопку), то будет выбрано содержимое редактируемого блока.

<div id="editable" style=" border:solid 1px #D31444" contenteditable="true" 
    onfocus="document.execCommand('selectAll', false, null);">
  12 some text...
</div>
    
<button onclick="document.getElementById('editable').focus();" >Click me</button>

В JSFiddle: http://jsfiddle.net/QKUZz/

person Andrew D.    schedule 03.09.2012
comment
@ think123, см. ссылку в обновленном ответе. Почему не document.execCommand? Другой способ (я думаю) потребовал использования объектов selection и range. - person Andrew D.; 03.09.2012
comment
Сможете ли вы обновить его и добавить в качестве функциональности? Спасибо. - person Lucas; 03.09.2012
comment
почему selectAll выделяет все в документе? :( - person Kim Honoridez; 16.02.2015
comment
Это не работает надежно в Chrome 43. См. проблему, которую я зарегистрировал. об этом. - person Dan Dascalescu; 08.07.2015

arrow_upward
3
arrow_downward

Отличная функция.

Я адаптировал его, чтобы обеспечить полный выбор текста в любом количестве редактируемых div через класс, независимо от того, щелкнули ли они напрямую или с вкладками:

$.fn.selectText = function(){
    var doc = document;
    var element = this[0];
    //console.log(this, element);
    if (doc.body.createTextRange) {
        var range = document.body.createTextRange();
        range.moveToElementText(element);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();        
        var range = document.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
    }
};

$(".editable").on("focus", function () {
    $(this).selectText();
});
$(".editable").on("click", function () {
    $(this).selectText();
});
$('.editable').mouseup(function(e){
    e.stopPropagation();
    e.preventDefault();
    // maximize browser compatability
    e.returnValue = false;
    e.cancelBubble = true;
    return false; 
});

HTML:

<div class="editable" style="border:dotted 1px #ccc;" contenteditable="true">01 text...</div>
<div class="editable" style="border:dotted 1px #ccc;" contenteditable="true">02 text...</div>
<div class="editable" style="border:dotted 1px #ccc;" contenteditable="true">03 text...</div>

FIDDLE:

http://jsfiddle.net/tw9jwjbv/

person Eric P    schedule 04.06.2015
comment
Отличная функция, спасла мне жизнь. Я добавил $("#mybutton").click(function () { $("#mydiv").selectText(); document.execCommand("copy");, который копирует содержимое DIV в буфер обмена. - person Matt; 21.11.2017

arrow_upward
3
arrow_downward

Chrome выбирает все, поэтому я просто добавил RAF, чтобы обойти это:

requestAnimationFrame(() => document.execCommand('selectAll'));

Демо: http://jsfiddle.net/0aqptw8m/

person redaxmedia    schedule 22.10.2018

arrow_upward
2
arrow_downward 

<div id="test" style=" border:solid 1px #D31444" contenteditable="true" onclick="document.execCommand('selectAll',false,null)">12 some text...</div>

Судя по этому ответу, приведенному в ссылке, вы не можете использовать код при нажатии на кнопку.

То, что я говорю, даже сказано в div onfocus="document.execCommand('selectAll',false,null)"

Затем используйте jQuery, чтобы активировать фокус $('#test').focus();

person Lemex    schedule 03.09.2012