Як встановити позицію caret (курсор) у змістовному елементі (div)?


190

Я маю такий простий HTML як приклад:

<div id="editable" contenteditable="true">
  text text text<br>
  text text text<br>
  text text text<br>
</div>
<button id="button">focus</button>

Хочу просту річ - коли натискаю кнопку, я хочу розмістити карету (курсор) у певному місці в редагованому розділі. Під час пошуку в Інтернеті цей JS приєднаний до натискання кнопки, але він не працює (FF, Chrome):

var range = document.createRange();
var myDiv = document.getElementById("editable");
range.setStart(myDiv, 5);
range.setEnd(myDiv, 5);

Чи можна встановити таке положення каретки вручну таким чином?

Відповіді:


260

У більшості браузерів потрібні об'єкти Rangeта Selection. Ви визначаєте кожну межу вибору як вузол і зміщення всередині цього вузла. Наприклад, щоб встановити карету на п'ятий символ другого рядка тексту, слід зробити наступне:

var el = document.getElementById("editable");
var range = document.createRange();
var sel = window.getSelection();
range.setStart(el.childNodes[2], 5);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);

IE <9 працює зовсім інакше. Якщо вам потрібно підтримувати ці браузери, вам знадобиться інший код.

Приклад jsFiddle: http://jsfiddle.net/timdown/vXnCM/


2
Ваше рішення працює чудово. Дуже дякую. Чи є шанс, що це могло б бути зроблено для роботи в "текстовому контексті" - це означає, що позиція №5 була б п'ятою літерою на екрані, а не п'ятою літерою у коді?
Фродік

3
@Frodik: Ви можете використовувати setSelectionRange()функцію з відповіді, яку я написав тут: stackoverflow.com/questions/6240139/… . Як я зазначив у відповіді, є різні речі, з якими вони не будуть працювати правильно / послідовно, але це може бути досить добре.
Тім Даун

7
як щодо встановлення карети всередині тегу span, як це: << div id = "editable" contenteditable = "true"> test1 <br> test2 <br> <span> </span> </div>
Med Akram Z

1
@MalcolmOcean: Barf, тому що в IE <9 немає document.createRange(або window.getSelection, але це не так далеко).
Тім Даун

1
@undroid: jsfiddle прекрасно працює для мене в Firefox 38.0.5 на Mac.
Tim Down

62

Більшість відповідей, які ви знайдете при змістовному позиціонуванні курсору, є досить спрощеними, оскільки вони задовольняють лише введення тексту з простим ванільним текстом. Після використання елементів html у контейнері введений текст розбивається на вузли та розподіляється вільно по всій структурі дерева.

Для встановлення позиції курсору у мене є ця функція, яка циклічно обводить всі дочірні текстові вузли в межах наданого вузла і встановлює діапазон від початку початкового вузла до символу chars.count :

function createRange(node, chars, range) {
    if (!range) {
        range = document.createRange()
        range.selectNode(node);
        range.setStart(node, 0);
    }

    if (chars.count === 0) {
        range.setEnd(node, chars.count);
    } else if (node && chars.count >0) {
        if (node.nodeType === Node.TEXT_NODE) {
            if (node.textContent.length < chars.count) {
                chars.count -= node.textContent.length;
            } else {
                range.setEnd(node, chars.count);
                chars.count = 0;
            }
        } else {
           for (var lp = 0; lp < node.childNodes.length; lp++) {
                range = createRange(node.childNodes[lp], chars, range);

                if (chars.count === 0) {
                    break;
                }
            }
        }
    } 

    return range;
};

Потім я викликаю розпорядок роботи з цією функцією:

function setCurrentCursorPosition(chars) {
    if (chars >= 0) {
        var selection = window.getSelection();

        range = createRange(document.getElementById("test").parentNode, { count: chars });

        if (range) {
            range.collapse(false);
            selection.removeAllRanges();
            selection.addRange(range);
        }
    }
};

Range.collapse (false) встановлює курсор в кінець діапазону. Я перевірив це на останніх версіях Chrome, IE, Mozilla та Opera, і всі вони чудово працюють.

PS. Якщо когось цікавить, я отримую поточну позицію курсора за допомогою цього коду:

function isChildOf(node, parentId) {
    while (node !== null) {
        if (node.id === parentId) {
            return true;
        }
        node = node.parentNode;
    }

    return false;
};

function getCurrentCursorPosition(parentId) {
    var selection = window.getSelection(),
        charCount = -1,
        node;

    if (selection.focusNode) {
        if (isChildOf(selection.focusNode, parentId)) {
            node = selection.focusNode; 
            charCount = selection.focusOffset;

            while (node) {
                if (node.id === parentId) {
                    break;
                }

                if (node.previousSibling) {
                    node = node.previousSibling;
                    charCount += node.textContent.length;
                } else {
                     node = node.parentNode;
                     if (node === null) {
                         break
                     }
                }
           }
      }
   }

    return charCount;
};

Код виконує протилежну функцію набору - він отримує поточне window.getSelection (). FocusNode та focusOffset і відраховує назад всі текстові символи, що зустрічаються, поки він не потрапить на батьківський вузол з ідентифікатором контейнера контейнераId. Функція isChildOf перед тим, як запустити, перевіряє, чи підтримуваний вузол насправді є дочірньою частиною наданого parentId .

Код повинен працювати прямо без змін, але я щойно взяв його з розробленого плагіном jQuery, тому зламав пару цього - дайте мені знати, якщо щось не працює!


1
Чи можете ви надати jsfiddle цього робочого, будь ласка? Я намагаюся зрозуміти, як це працює, оскільки я не знаю, до чого node.idі не маю parentIdприкладу. Дякую :)
Бендіхоссан

4
@Bendihossan - спробуйте це jsfiddle.net/nrx9yvw9/5 - чомусь вміст, який можна редагувати вміст у цьому прикладі, додає деякі символи та повернення перевезення на початку тексту (це може бути навіть сам jsfiddle, як це робиться) не робити те ж саме на моєму сервері asp.net).
Ліам

@Bendihossan - елементи html, що містяться в дискусійному розділі, розбиваються на структуру дерева з одним вузлом для кожного елемента html. GetCurrentCursorPosition отримує поточну позицію вибору і повертається назад до дерева, підраховуючи кількість символів простого тексту. Node.id - це ідентифікатор html-елемента, тоді як parentId посилається на ідентифікатор html-елемента, на який слід перестати рахувати
Liam

1
Це в моєму списку todo, щоб написати той, який повністю відокремлений від мого коду інтерфейсу - я опублікую його, коли у мене буде секунда.
Ліам

1
Щоб ви могли швидко протестувати свої різні рішення, ви могли б відредагувати свою відповідь у фрагменти коду, який можна виконати? Спасибі заздалегідь.
Бась

3

Якщо ви не хочете використовувати jQuery, ви можете спробувати такий підхід:

public setCaretPosition() {
    const editableDiv = document.getElementById('contenteditablediv');
    const lastLine = this.input.nativeElement.innerHTML.replace(/.*?(<br>)/g, '');
    const selection = window.getSelection();
    selection.collapse(editableDiv.childNodes[editableDiv.childNodes.length - 1], lastLine.length);
}

editableDivВи можете редагувати елемент, не забудьте встановити idйого. Тоді вам потрібно дістати свій innerHTMLелемент і вирізати всі гальмівні лінії. І просто встановити крах з наступними аргументами.


3
  const el = document.getElementById("editable");
  el.focus()
  let char = 1, sel; // character at which to place caret

  if (document.selection) {
    sel = document.selection.createRange();
    sel.moveStart('character', char);
    sel.select();
  }
  else {
    sel = window.getSelection();
    sel.collapse(el.lastChild, char);
  }

3

function set_mouse() {
  var as = document.getElementById("editable");
  el = as.childNodes[1].childNodes[0]; //goal is to get ('we') id to write (object Text) because it work only in object text
  var range = document.createRange();
  var sel = window.getSelection();
  range.setStart(el, 1);
  range.collapse(true);
  sel.removeAllRanges();
  sel.addRange(range);

  document.getElementById("we").innerHTML = el; // see out put of we id
}
<div id="editable" contenteditable="true">dddddddddddddddddddddddddddd
  <p>dd</p>psss
  <p>dd</p>
  <p>dd</p>
  <p>text text text</p>
</div>
<p id='we'></p>
<button onclick="set_mouse()">focus</button>

Дуже важко встановити карету в належному положенні, коли у вас є попередній елемент типу (p) (span) і т.д.

<div id="editable" contenteditable="true">dddddddddddddddddddddddddddd<p>dd</p>psss<p>dd</p>
    <p>dd</p>
    <p>text text text</p>
</div>
<p id='we'></p>
<button onclick="set_mouse()">focus</button>
<script>

    function set_mouse() {
        var as = document.getElementById("editable");
        el = as.childNodes[1].childNodes[0];//goal is to get ('we') id to write (object Text) because it work only in object text
        var range = document.createRange();
        var sel = window.getSelection();
        range.setStart(el, 1);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);

        document.getElementById("we").innerHTML = el;// see out put of we id
    }
</script>

1
Щоб мати можливість швидко перевірити свою відповідь, ви могли б відредагувати свою відповідь у фрагменті коду, який можна виконати? Спасибі заздалегідь.
Бась

1

Я пишу підсвічувач синтаксису (і редактор основного коду), і мені потрібно було знати, як автоматично набрати єдину таблицю цитат та перемістити каре назад (як нині багато редакторів коду в даний час).

Ось фрагмент мого рішення, завдяки великій допомозі в цій нитці, документах MDN і безлічі перегляду консолей мозку.

//onKeyPress event

if (evt.key === "\"") {
    let sel = window.getSelection();
    let offset = sel.focusOffset;
    let focus = sel.focusNode;

    focus.textContent += "\""; //setting div's innerText directly creates new
    //nodes, which invalidate our selections, so we modify the focusNode directly

    let range = document.createRange();
    range.selectNode(focus);
    range.setStart(focus, offset);

    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
}

//end onKeyPress event

Це в змістовному елементі Div

Я залишаю це тут як подяку, розуміючи, що вже прийнята відповідь.


1

Я зробив це для мого простого редактора тексту.

Відмінності від інших методів:

  • Висока продуктивність
  • Працює з усіма просторами

використання

// get current selection
const [start, end] = getSelectionOffset(container)

// change container html
container.innerHTML = newHtml

// restore selection
setSelectionOffset(container, start, end)

// use this instead innerText for get text with keep all spaces
const innerText = getInnerText(container)
const textBeforeCaret = innerText.substring(0, start)
const textAfterCaret = innerText.substring(start)

selection.ts

/** return true if node found */
function searchNode(
    container: Node,
    startNode: Node,
    predicate: (node: Node) => boolean,
    excludeSibling?: boolean,
): boolean {
    if (predicate(startNode as Text)) {
        return true
    }

    for (let i = 0, len = startNode.childNodes.length; i < len; i++) {
        if (searchNode(startNode, startNode.childNodes[i], predicate, true)) {
            return true
        }
    }

    if (!excludeSibling) {
        let parentNode = startNode
        while (parentNode && parentNode !== container) {
            let nextSibling = parentNode.nextSibling
            while (nextSibling) {
                if (searchNode(container, nextSibling, predicate, true)) {
                    return true
                }
                nextSibling = nextSibling.nextSibling
            }
            parentNode = parentNode.parentNode
        }
    }

    return false
}

function createRange(container: Node, start: number, end: number): Range {
    let startNode
    searchNode(container, container, node => {
        if (node.nodeType === Node.TEXT_NODE) {
            const dataLength = (node as Text).data.length
            if (start <= dataLength) {
                startNode = node
                return true
            }
            start -= dataLength
            end -= dataLength
            return false
        }
    })

    let endNode
    if (startNode) {
        searchNode(container, startNode, node => {
            if (node.nodeType === Node.TEXT_NODE) {
                const dataLength = (node as Text).data.length
                if (end <= dataLength) {
                    endNode = node
                    return true
                }
                end -= dataLength
                return false
            }
        })
    }

    const range = document.createRange()
    if (startNode) {
        if (start < startNode.data.length) {
            range.setStart(startNode, start)
        } else {
            range.setStartAfter(startNode)
        }
    } else {
        if (start === 0) {
            range.setStart(container, 0)
        } else {
            range.setStartAfter(container)
        }
    }

    if (endNode) {
        if (end < endNode.data.length) {
            range.setEnd(endNode, end)
        } else {
            range.setEndAfter(endNode)
        }
    } else {
        if (end === 0) {
            range.setEnd(container, 0)
        } else {
            range.setEndAfter(container)
        }
    }

    return range
}

export function setSelectionOffset(node: Node, start: number, end: number) {
    const range = createRange(node, start, end)
    const selection = window.getSelection()
    selection.removeAllRanges()
    selection.addRange(range)
}

function hasChild(container: Node, node: Node): boolean {
    while (node) {
        if (node === container) {
            return true
        }
        node = node.parentNode
    }

    return false
}

function getAbsoluteOffset(container: Node, offset: number) {
    if (container.nodeType === Node.TEXT_NODE) {
        return offset
    }

    let absoluteOffset = 0
    for (let i = 0, len = Math.min(container.childNodes.length, offset); i < len; i++) {
        const childNode = container.childNodes[i]
        searchNode(childNode, childNode, node => {
            if (node.nodeType === Node.TEXT_NODE) {
                absoluteOffset += (node as Text).data.length
            }
            return false
        })
    }

    return absoluteOffset
}

export function getSelectionOffset(container: Node): [number, number] {
    let start = 0
    let end = 0

    const selection = window.getSelection()
    for (let i = 0, len = selection.rangeCount; i < len; i++) {
        const range = selection.getRangeAt(i)
        if (range.intersectsNode(container)) {
            const startNode = range.startContainer
            searchNode(container, container, node => {
                if (startNode === node) {
                    start += getAbsoluteOffset(node, range.startOffset)
                    return true
                }

                const dataLength = node.nodeType === Node.TEXT_NODE
                    ? (node as Text).data.length
                    : 0

                start += dataLength
                end += dataLength

                return false
            })

            const endNode = range.endContainer
            searchNode(container, startNode, node => {
                if (endNode === node) {
                    end += getAbsoluteOffset(node, range.endOffset)
                    return true
                }

                const dataLength = node.nodeType === Node.TEXT_NODE
                    ? (node as Text).data.length
                    : 0

                end += dataLength

                return false
            })

            break
        }
    }

    return [start, end]
}

export function getInnerText(container: Node) {
    const buffer = []
    searchNode(container, container, node => {
        if (node.nodeType === Node.TEXT_NODE) {
            buffer.push((node as Text).data)
        }
        return false
    })
    return buffer.join('')
}

1

Я відновив відповідь @ Ліама. Я ставлю його до класу зі статичними методами, я змусив його функції отримувати елемент замість #id та деякі інші невеликі налаштування.

Цей код особливо хороший для закріплення курсору у багатому текстовому полі, яке ви можете створювати <div contenteditable="true">. Я затримався на цьому кілька днів, перш ніж прийти до наведеного нижче коду.

редагувати: Його відповідь і ця відповідь мають помилку, пов’язану з натисканням клавіші. Оскільки введення не враховується як символ, положення курсору заплутується після натискання клавіші Enter. Якщо мені вдасться виправити код, я оновлю свою відповідь.

edit2: Збережіть від себе багато головних болів і переконайтеся, що <div contenteditable=true>це так display: inline-block. Це виправляє деякі помилки, пов’язані з розміщенням Chrome, <div>а не <br>після натискання клавіші Enter.

Як використовувати

let richText = document.getElementById('rich-text');
let offset = Cursor.getCurrentCursorPosition(richText);
// do stuff to the innerHTML, such as adding/removing <span> tags
Cursor.setCurrentCursorPosition(offset, richText);
richText.focus();

Код

// Credit to Liam (Stack Overflow)
// https://stackoverflow.com/a/41034697/3480193
class Cursor {
    static getCurrentCursorPosition(parentElement) {
        var selection = window.getSelection(),
            charCount = -1,
            node;
        
        if (selection.focusNode) {
            if (Cursor._isChildOf(selection.focusNode, parentElement)) {
                node = selection.focusNode; 
                charCount = selection.focusOffset;
                
                while (node) {
                    if (node === parentElement) {
                        break;
                    }

                    if (node.previousSibling) {
                        node = node.previousSibling;
                        charCount += node.textContent.length;
                    } else {
                        node = node.parentNode;
                        if (node === null) {
                            break;
                        }
                    }
                }
            }
        }
        
        return charCount;
    }
    
    static setCurrentCursorPosition(chars, element) {
        if (chars >= 0) {
            var selection = window.getSelection();
            
            let range = Cursor._createRange(element, { count: chars });

            if (range) {
                range.collapse(false);
                selection.removeAllRanges();
                selection.addRange(range);
            }
        }
    }
    
    static _createRange(node, chars, range) {
        if (!range) {
            range = document.createRange()
            range.selectNode(node);
            range.setStart(node, 0);
        }

        if (chars.count === 0) {
            range.setEnd(node, chars.count);
        } else if (node && chars.count >0) {
            if (node.nodeType === Node.TEXT_NODE) {
                if (node.textContent.length < chars.count) {
                    chars.count -= node.textContent.length;
                } else {
                    range.setEnd(node, chars.count);
                    chars.count = 0;
                }
            } else {
                for (var lp = 0; lp < node.childNodes.length; lp++) {
                    range = Cursor._createRange(node.childNodes[lp], chars, range);

                    if (chars.count === 0) {
                    break;
                    }
                }
            }
        } 

        return range;
    }
    
    static _isChildOf(node, parentElement) {
        while (node !== null) {
            if (node === parentElement) {
                return true;
            }
            node = node.parentNode;
        }

        return false;
    }
}

0

Я думаю, що не просто встановити карету на якусь позицію в змістовному елементі. Я написав для цього власний код. Він обходить дерево вузла, визначаючи, скільки символів залишилось, і встановлює карету в потрібному елементі. Я не дуже перевіряв цей код.

//Set offset in current contenteditable field (for start by default or for with forEnd=true)
function setCurSelectionOffset(offset, forEnd = false) {
    const sel = window.getSelection();
    if (sel.rangeCount !== 1 || !document.activeElement) return;

    const firstRange = sel.getRangeAt(0);

    if (offset > 0) {
        bypassChildNodes(document.activeElement, offset);
    }else{
        if (forEnd)
            firstRange.setEnd(document.activeElement, 0);
        else
            firstRange.setStart(document.activeElement, 0);
    }



    //Bypass in depth
    function bypassChildNodes(el, leftOffset) {
        const childNodes = el.childNodes;

        for (let i = 0; i < childNodes.length && leftOffset; i++) {
            const childNode = childNodes[i];

            if (childNode.nodeType === 3) {
                const curLen = childNode.textContent.length;

                if (curLen >= leftOffset) {
                    if (forEnd)
                        firstRange.setEnd(childNode, leftOffset);
                    else
                        firstRange.setStart(childNode, leftOffset);
                    return 0;
                }else{
                    leftOffset -= curLen;
                }
            }else
            if (childNode.nodeType === 1) {
                leftOffset = bypassChildNodes(childNode, leftOffset);
            }
        }

        return leftOffset;
    }
}

Я також написав код, щоб отримати поточну позицію карети (не тестував):

//Get offset in current contenteditable field (start offset by default or end offset with calcEnd=true)
function getCurSelectionOffset(calcEnd = false) {
    const sel = window.getSelection();
    if (sel.rangeCount !== 1 || !document.activeElement) return 0;

    const firstRange     = sel.getRangeAt(0),
          startContainer = calcEnd ? firstRange.endContainer : firstRange.startContainer,
          startOffset    = calcEnd ? firstRange.endOffset    : firstRange.startOffset;
    let needStop = false;

    return bypassChildNodes(document.activeElement);



    //Bypass in depth
    function bypassChildNodes(el) {
        const childNodes = el.childNodes;
        let ans = 0;

        if (el === startContainer) {
            if (startContainer.nodeType === 3) {
                ans = startOffset;
            }else
            if (startContainer.nodeType === 1) {
                for (let i = 0; i < startOffset; i++) {
                    const childNode = childNodes[i];

                    ans += childNode.nodeType === 3 ? childNode.textContent.length :
                           childNode.nodeType === 1 ? childNode.innerText.length :
                           0;
                }
            }

            needStop = true;
        }else{
            for (let i = 0; i < childNodes.length && !needStop; i++) {
                const childNode = childNodes[i];
                ans += bypassChildNodes(childNode);
            }
        }

        return ans;
    }
}

Вам також потрібно знати про range.startOffset та range.endOffset, що містять зміщення символів для текстових вузлів (nodeType === 3) та зміщення дочірнього вузла для вузлів елементів (nodeType === 1). range.startContainer і range.endContainer може посилатися на будь-який вузол елемента будь-якого рівня в дереві (звичайно, вони також можуть посилатися на текстові вузли).


0

На основі відповіді Тіма Дауна, але він перевіряє останній відомий "гарний" текст рядка. Він розміщує курсор в самому кінці.

Крім того, я міг би також рекурсивно / ітеративно перевіряти останню дитину кожної останньої дитини, яка є поспіль, щоб знайти абсолютний останній "добрий" текстовий вузол у DOM.

function onClickHandler() {
  setCaret(document.getElementById("editable"));
}

function setCaret(el) {
  let range = document.createRange(),
      sel = window.getSelection(),
      lastKnownIndex = -1;
  for (let i = 0; i < el.childNodes.length; i++) {
    if (isTextNodeAndContentNoEmpty(el.childNodes[i])) {
      lastKnownIndex = i;
    }
  }
  if (lastKnownIndex === -1) {
    throw new Error('Could not find valid text content');
  }
  let row = el.childNodes[lastKnownIndex],
      col = row.textContent.length;
  range.setStart(row, col);
  range.collapse(true);
  sel.removeAllRanges();
  sel.addRange(range);
  el.focus();
}

function isTextNodeAndContentNoEmpty(node) {
  return node.nodeType == Node.TEXT_NODE && node.textContent.trim().length > 0
}
<div id="editable" contenteditable="true">
  text text text<br>text text text<br>text text text<br>
</div>
<button id="button" onclick="onClickHandler()">focus</button>

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.