如何在 HTML/JavaScript 中构建自定义可聚焦对象
我想在 HTML 中构建一个可聚焦的自定义对象。一般情况下我怎样才能做到这一点？
更具体地说为什么我想要这样：我需要某种具有更多功能和控制力的编辑器组件。即不能直接输入单个字符。它就像一棵大对象树（想象一下 AST 左右），您的重点是其中一些对象。每个对象都有一些属性，可能是可以编辑的字符序列和一些子对象。现在，当您键入时，根据焦点所在的位置，它应该操作这些对象，即添加一些新的子对象（在焦点所在的位置），删除一些对象或执行一些其他操作。另外也不应该直接允许粘贴，而是应该解析当前剪贴板内容，然后进行特定操作。复制某些内容应该会在剪贴板中产生某种文本表示形式。
我现在可以去以某种方式自己重新编码诸如焦点光标之类的东西，但这有几个缺点。主要是它忽略了现在真正的焦点在哪里。我不确定 HTML 是否已经提供了类似的东西，这是否会让事情变得更容易。
编辑：在我找到一些第一个有用的信息后，一些仍然悬而未决的问题：
- 绘制焦点光标的简单方法是什么？即，如果某个
div现在具有焦点并且包含一些文本，我想绘制一个光标。 - 我如何处理复制和复制粘贴？ （有关更多详细信息，请参阅上文。）
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
divhas 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.)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
啊，我在这里找到了一些有用的信息 。我想有一些解释我需要以我想要的方式处理焦点。
Ah, I found somewhat useful information here. I guess there is anything explained I need to handle the focus in the way I want.
只需使用 html 输入，并用它处理特殊键即可。
如果将 tabIndex 属性添加到 html 元素，则焦点可以停止在其上（我的意思不仅仅是输入和文本区域）。如果您在聚焦时将这些可聚焦对象与文本输入交替使用，则可以轻松构建自定义编辑器 UI。
在ie中，window.clipboardData包装了剪贴板对象（简单的例子：http://lab.clipboardData. artlung.com/copy-to-clipboard-javascript/）在其他浏览器中您可以触发复制/粘贴宽度 document/Range.execCommand('Copy');
简单示例：
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: