Выберите весь текст в contenteditable div, когда он фокусируется/щелкает

У меня есть contenteditable div, как показано ниже.

<div style=" border:solid 1px #D31444" contenteditable="true">12 some text...</div>

Что мне нужно, когда я нажимаю на div, весь текст будет автоматически выбран. Можете ли вы дать мне решение?

Ответ 1

Попробуйте следующее:

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

Ответ 2

Это сделает это. Таймер существует для Chrome и Safari, потому что в этих браузерах поведение основного браузера, которое выбирает весь элемент, кажется, запускается после события фокуса, тем самым перекрывая эффект кода выбора, если оно не отложено до момента события фокуса:

var div = document.getElementById("editable");

div.onfocus = function() {
    window.setTimeout(function() {
        var sel, range;
        if (window.getSelection && document.createRange) {
            range = document.createRange();
            range.selectNodeContents(div);
            sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (document.body.createTextRange) {
            range = document.body.createTextRange();
            range.moveToElementText(div);
            range.select();
        }
    }, 1);
};

Ответ 3

Проблема с событием focus в div заключается в том, что он не может запускаться, поскольку он считает, что div не может быть доступен для редактирования. Редактируемое содержимое в DOM помечено знаком tabindex в фоновом режиме, поэтому, чтобы ваш div получил событие onfocus, вам нужно явно объявить свойство div tabindex. HTML:

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

Это должно работать с onfocus.