JavaScript'contenteditable'

本文介绍了JavaScript'contenteditable' - 获取/设置插入位置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我已经阅读了一些有关插入符号位置的帖子，但似乎没有人回答我的特定问题。

I have read a few posts on positioning the caret, but none seem to answer my particular issue.

我有2个div（ div1 和 div2 ）

div1 =不可编辑的div

div2 = contenteditable div

两个div包含完全相同的内容

当用户点击 div1 ，它被隐藏， div2 出现在确切的位置，用户可以编辑

I have 2 divs (div1 and div2)

div1 = noneditable div

div2 = contenteditable div

both divs contain exact same contents

when user clicks on div1, it gets hidden, and div2 appears in exact location and user can edit

问题：我希望插入符号在div2上的确切位置显示为div1

The problem: I want the caret to appear in exact location on div2 as div1

所以，我需要一些方法来读取用户点击的位置div1，然后当div2出现时将光标/插入符号放在同一位置，所以 getCaretLocation（in_div_id）和 setCaretLocation（in_div_id）一组函数。

So, I need some way to READ the location where the user clicks on div1, and then when div2 appears place the cursor/caret in that same location, so a getCaretLocation(in_div_id) and setCaretLocation(in_div_id) set of functions.

任何方式都可以吗？

谢谢 -

推荐答案

简答：你不能

长答案：问题你'll face是你能够获得div1上click事件的（x，y）坐标，但是插入位置的任何实现都需要你知道插入符号在内容中的位置（这是插入符号前面的字符。）

Long answer : The problem you'll face is that you'll be able to get (x,y) coordinates for the click event on div1, but any implementation of the caret position while require you knowing the position of the caret in the content (which is the number of characters preceding the caret).

要将（x，y）坐标转换为字符位置，您实际需要知道之前有多少个字符（即。留在当前行及以上，如果文本是ltr）。

To convert the (x,y) coordinates to a character position you actually need to know how many characters were before (ie. left on the current line and above, if the text is ltr).

如果使用固定宽度字体，则可以简化问题：映射（x，y） ）坐标到字符网格上的（线，列）坐标。

If you use a fixed width font, you can simplify the problem : mapping an (x,y) coordinate to a (line, column) coordinate on a character grid.

但是，您仍然面临不知道文本如何被包装的问题。例如：

However, you still face the problem of not knowing how the text is wrapped. For example :

------------------ |Lorem ipsum | |dolor sit amet | |consectetur | |adipiscing elit | ------------------

如果用户点击 dolor 中的 d ，您就会知道该字符是第二行的第一个字符，但是如果不知道包装算法，则无法理解我知道这是Lorem ipsum dolor sit ......中的第13个角色。并且不能保证这样的包装算法在浏览器和平台上是相同的。

If the user clicks on the d in dolor, you know that the character is the 1st on the 2nd line, but without knowing the wrapping algorithm there is no way you'll know that it is the 13th character in "Lorem ipsum dolor sit…". And there is no guarantee that such a wrapping algorithm is identical across browsers and platform.

现在，我想知道为什么你会使用2个不同的同步 div 首先？当用户点击（或悬停）时，仅使用一个div并将其内容设置为可编辑是不是更容易？

Now, what I'm wondering is why would you use 2 different synced div in the first place ? Wouldn't it be easier to use only one div and set its content to editable when the user clicks (or hovers) ?