如何在HTML / JavaScript中建立自定義可聚焦對象

Question

我想用可聚焦的HTML構建自定義對象。 我一般該怎么做？

關於我為什么要這樣做的更具體的信息：我需要某種具有更多功能並對其進行控制的編輯器組件。 即，任何單個字符都不能直接輸入。 它就像一棵大樹（想象一個AST左右），您的注意力集中在其中一些對象上。 每個對象都有一些屬性，例如可以編輯的字符序列和一些子對象。 現在，當您鍵入內容時，它應根據焦點的位置來操縱這些對象，即添加一些新的子對象（在焦點所在的位置），刪除一些對象或進行其他一些操作。 另外，不應直接允許粘貼，而應該解析當前剪貼板內容，然后執行特定操作。 復制某些內容應在剪貼板中產生某種形式的文本表示。

我現在可以走了，以某種方式自己重新編碼了諸如焦點光標之類的東西，但這有幾個缺點。 大多數情況下，它忽略了當前真正的焦點在哪里。 而且我不確定HTML是否可以提供類似的功能，這是否會使一切變得容易。

---

編輯：在我找到一些第一手有用的信息之后，還有一些懸而未決的問題：

• 繪制焦點光標的簡單方法是什么？ 即如果某個div現在具有焦點，並且其中包含一些文本，我想繪制一個光標。
• 如何處理復制和粘貼？ （有關更多詳細信息，請參見上文。）

Answer 1

啊，我在這里找到了一些有用的信息。 我想我需要按照我想要的方式來處理焦點問題。

Answer 2

只需使用html輸入，並使用它來處理特殊鍵。 如果將tabIndex屬性添加到html元素，則可以將焦點停止在它上面（我的意思是不僅是輸入和文本區域）。 如果在聚焦時用文本輸入替換這些可聚焦對象，則可以輕松構建自定義編輯器UI。

在ie window.clipboardData中包裝其他剪貼板對象（簡單的示例： http : //lab.artlung.com/copy-to-clipboard-javascript/ ），您可以觸發復制/粘貼寬度document / Range.execCommand（'Copy '）;

簡單的例子：

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