how to build custom focusable object in HTML/JavaScript

Question

I want to build a custom object in HTML which is focusable. How can I do that in general?

More specific about why I want that: I need some kind of editor component with much more power and control over it. I.e. no single character should be possible to be typed in directly. It is like a big tree of objects (imagine an AST or so) and your focus is on some of these objects. Each object has some properties, maybe a character sequence which can be edited and some subobjects. Now when you type, depending on where the focus is, it should manipulate those objects, i.e. add some new sub objects (at the place where the focus is), delete some objects or do some other manipulations. Also pasting should not be allowed directly, it should rather parse the current clipboard content and then do the specific manipulations. Copying some content should result in some sort of text representation in the clipboard.

I could go now and somehow recode something like a focus cursor myself but that has several disadvantages. Mostly that it ignores where the real focus is right now. And I'm not sure if it makes anything easier, if HTML may provide already something like this.

---

Edit: After I found some first useful information, some still open questions:

• What is an easy way to draw some focus cursor? I.e. if some div has the focus right now and it contains some text, I want to draw a cursor.
• How do I handle copy & paste? (See above for more details.)

Answer 1

Ah, I found somewhat useful information here. I guess there is anything explained I need to handle the focus in the way I want.

Answer 2

Simply use html inputs, and handle special keys with it. If you add tabIndex attribute to html elements the focus can be stopped on it (i mean not just input and textarea). If you alternate these focusable objects with text inputs when its focused, you can easily build custom editor UI.

In ie window.clipboardData wraps the clipboard object (simple ex: http://lab.artlung.com/copy-to-clipboard-javascript/) in other browsers you can trigger copy/paste width document/Range.execCommand('Copy');

Simple Example:

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