как построить пользовательский фокусируемый объект в HTML / JavaScript

Question

Я хочу построить пользовательский объект в HTML, который можно фокусировать. Как я могу это сделать в целом?

Более конкретно о том, почему я этого хочу: мне нужен какой-то компонент редактора с гораздо большей мощностью и контролем над ним. То есть нельзя вводить один символ непосредственно. Это как большое дерево объектов (представьте себе AST или около того), и вы сосредотачиваетесь на некоторых из этих объектов. Каждый объект имеет некоторые свойства, например, последовательность символов, которую можно редактировать, и несколько подобъектов. Теперь, когда вы печатаете, в зависимости от того, где находится фокус, он должен манипулировать этими объектами, то есть добавлять несколько новых субобъектов (в месте, где находится фокус), удалять некоторые объекты или делать некоторые другие манипуляции. Кроме того, вставка не должна быть разрешена напрямую, она должна скорее анализировать текущее содержимое буфера обмена, а затем выполнять определенные манипуляции. Копирование некоторого содержимого должно привести к некоторому текстовому представлению в буфере обмена.

Я мог бы сейчас пойти и как-нибудь перекодировать что-то вроде фокуса курсора, но у этого есть несколько недостатков. Главным образом это игнорирует, где реальный центр находится прямо сейчас. И я не уверен, облегчает ли это что-то, если HTML может уже предоставлять что-то подобное.

---

Изменить: После того, как я нашел первую полезную информацию, некоторые все еще открытые вопросы:

• Какой простой способ нарисовать курсор фокуса? То есть если какой-то div имеет фокус прямо сейчас и содержит текст, я хочу нарисовать курсор.
• Как мне справиться с копированием и вставкой? (См. Выше для более подробной информации.)

Answer 1

Ах, я нашел несколько полезной информации здесь . Я думаю, есть что-то объясненное, мне нужно справиться с фокусом, как я хочу.

Answer 2

Просто используйте html-входы и используйте специальные ключи для него.Если вы добавите атрибут tabIndex к html-элементам, фокус может быть остановлен на нем (я имею в виду не только ввод и текстовую область).Если вы чередуете эти фокусируемые объекты с текстовым вводом, когда он сфокусирован, вы можете легко создать пользовательский интерфейс редактора.

В ie window.clipboardData оборачивает объект буфера обмена (например, http://lab.artlung.com/copy-to-clipboard-javascript/), в других браузерах можно запускать копирование / вставку документа width / Range.execCommand ('Copy');

Простой пример:

Copy = textHolderElement.createTextRange();
Copy.execCommand("Copy");