Javascript-форум - Возможность перемещения указателя по <div>

Javascript-форум (https://javascript.ru/forum/)

- ExtJS (https://javascript.ru/forum/extjs/)

- - Возможность перемещения указателя по <div> - ExtJS (https://javascript.ru/forum/extjs/57265-vozmozhnost-peremeshheniya-ukazatelya-po-div-extjs.html)

Возможность перемещения указателя по <div> - ExtJS

Есть <div> элемент с определенным текстом.

Как выполнить перемещение указателя к соответствующей букве <div> в ExtJS?

Пример на Javascript не работает в ExtJS:

<html>

<head>

<title>set cursor position N10</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">

function focusPackageCode(id) {
	var node = document.querySelector('div#' + id + 'word');
	node.focus();
	var textNode = node.firstChild;
	var caret = 10;
	var range = document.createRange();
	range.setStart(textNode, caret);
	range.setEnd(textNode, caret);
	var sel = window.getSelection();
	sel.removeAllRanges();
	sel.addRange(range);
}

</script>

</head>

<body>

<div id="packagecode1word" name="packagecode1word" contenteditable="true">set cursor position N10</div>
<p align="center" onClick="focusPackageCode('packagecode1');">Set</p>

</body>

</html>

Как видите функция работает в Javascript но не в ExtJS. Когда я кликаю на кнопку "Set" указатель в "<div>" перемещается к букве номер 10.

Но когда пытаюсь выполнить эту функцию в ExtJS не работает:

increaseIndex: 0,

this.increaseIndex++;

nodeScriptFunction.appendChild(
                    doc.createTextNode(
                        'function focusPackageCode' + this.increaseIndex +
                            "(id){var node = document.querySelector('div#'+id+'word');node.focus();var textNode = node.firstChild;var caret = 10;var range = document.createRange();range.setStart(textNode, caret);range.setEnd(textNode, caret);var sel = window.getSelection();sel.removeAllRanges();sel.addRange(range);}"
                    )
                );

nodeName.setAttribute('onClick','focusPackageCode' + this.increaseIndex + '(this.id);');

nodeText.setAttribute('id','packagecode' + this.increaseIndex + 'word');
nodeText.setAttribute('contenteditable','true');

Когда я кликаю на кнопку 'onClick' появляется такая ошибка:

Цитата:

Uncaught TypeError: Failed to execute 'setStart' on 'Range': parameter 1 is not of type 'Node'.

Я не вижу в вашем коде ничего, относящегося к Ext JS. Скорее всего, опечатка где-нибудь закралась, или ещё что-нибудь такое же тривиальное. Поставьте прерывание в начале функции focusPackageCode и пошагово смотрите, что содержится в переменной textNode и почему браузер плюётся слюной.

Заодно надеваю свою пророческую шапку и предрекаю вам много багов, весёлых и разных. Ваш код предполагает, что фокусирование элемента это синхронная операция; так вот, это не так. Точнее, не всегда и не везде так. (IE! IE! кричали возбуждённые пионеры)

Спасибо за ответ. Буду двигаться в этом направлении. Но я показал вам одну версию в JavaScript а вторую в ExtJS. Только сокращенную версию. Как видите я добавляю функцию JavaScript в сам ExtJS а также как параметер прерывание OnClick. ExtJS код начинается после предложения: "Но когда пытаюсь выполнить эту функцию в ExtJS не работает:"

Я исправил эту проблему. Все очень было просто.

В следующий раз воспользуйтесь, пожалуйста, песочницей.