在输入相对于Div中设置光标位置单击

Question

如上所示，输入的标准操作是将焦点设置为键入或编辑时光标所在的位置。

使用上面的示例我尝试将其设置为当您在div上方click时设置相对于Div点击的cursor位置。

使用React的原生JavaScript。

我目前的代码只是onClick设置focus到input。

目标： 代码反映在上面的div中。然后，我会围绕某些关键字包装spans以产生如下效果：

然后隐藏输入，div将模仿并看起来像文本框。