Javascript 使用jQuery在文本输入框中选择特定位置

我正在试验文本输入的实时预览

目前，用户可以在键入文本时预览文本，也可以通过单击实时预览文本来选择输入字段。我想做的是允许用户单击实时预览文本，并使文本字段中的光标显示在文本中与他们在预览中单击的位置完全相同的位置。（任何解决方案都必须使用多个输入字段。）

之前的文章展示了如何突出显示一个范围或一个特定的单词（见下文），但我找不到任何Javascript/JQuery来说明我正在尝试做什么。任何建议都会有帮助

相关堆栈溢出问题：

$（文档）.ready（函数（）{
$（'.liveInput'）.keyup（函数（）{
var$this=$（this）；
$（'.'.+$this.attr（'id'）+'.html（$this.val（））；
});
$（'.description'）。单击（函数（）{
$（“#说明”）.focus（）；
});
$（“.description”）.hover（函数（）{
$（this.toggleClass（“预览悬停”）；
});
});
。预览悬停{
光标：指针；
不透明度：0.5；
}


逻辑很简单：

用
span
包装每个字符
单击
.description
获取准确的
span
，并使用jQuery的
.index（）
获取其索引
将光标移动到该索引，并使用应答中的代码
如果有什么不清楚，请告诉我

另外，我猜在某些情况下，这段代码会很重，所以不要在大文本上这样做


$（文档）.ready（函数（）{
$（'.liveInput'）.keyup（函数（）{
var$this=$（this）；
$（'.+$this.attr（'id'）+'.html（函数（）{
返回$this.val（）.split（“”）.map（函数（char）{
返回“”+字符+“”；
}).加入（“”）；
});
});
$（'.description'）。单击（函数（e）{
var span=$（e.target）；
var caretPos=$（this）.find（'span'）.index（span）；
//var caretPos
var elem=$（'描述'）[0]；
if（元素createTextRange）{
var range=elem.createTextRange（）；
range.move（'character'，caretPos）；
range.select（）；
}
否则{
如果（元素选择开始）{
元素焦点（）；
元素设置选择范围（caretPos，caretPos）；
}
其他的
元素焦点（）；
}
});
$（“.description”）.hover（函数（）{
$（this.toggleClass（“预览悬停”）；
});
});
。预览悬停{
光标：指针；
不透明度：0.5；
}


逻辑很简单：

用
span
包装每个字符
单击
.description
获取准确的
span
，并使用jQuery的
.index（）
获取其索引
将光标移动到该索引，并使用应答中的代码
如果有什么不清楚，请告诉我

另外，我猜在某些情况下，这段代码会很重，所以不要在大文本上这样做


$（文档）.ready（函数（）{
$（'.liveInput'）.keyup（函数（）{
var$this=$（this）；
$（'.+$this.attr（'id'）+'.html（函数（）{
返回$this.val（）.split（“”）.map（函数（char）{
返回“”+字符+“”；
}).加入（“”）；
});
});
$（'.description'）。单击（函数（e）{
var span=$（e.target）；
var caretPos=$（this）.find（'span'）.index（span）；
//var caretPos
var elem=$（'描述'）[0]；
if（元素createTextRange）{
var range=elem.createTextRange（）；
range.move（'character'，caretPos）；
range.select（）；
}
否则{
如果（元素选择开始）{
元素焦点（）；
元素设置选择范围（caretPos，caretPos）；
}
其他的
元素焦点（）；
}
});
$（“.description”）.hover（函数（）{
$（this.toggleClass（“预览悬停”）；
});
});
。预览悬停{
光标：指针；
不透明度：0.5；
}


我想这就是你要找的


$（'.liveInput'）.keyup（函数（）{
var$this=$（this）；
$（'.'.+$this.attr（'id'）+'.html（$this.val（））；
});
$（'.description'）。单击（函数（）{
s=window.getSelection（）；
var范围=s.getRangeAt（0）；
var节点=s.anchorNode；
$（'.liveInput'）[0].setSelectionRange（range.startOffset，range.startOffset）；
});
$（“.description”）.hover（函数（）{
$（this.toggleClass（“预览悬停”）；
});
。预览悬停{
光标：文本；
不透明度：0.5；
}


我想这就是你要找的


$（'.liveInput'）.keyup（函数（）{
var$this=$（this）；
$（'.'.+$this.attr（'id'）+'.html（$this.val（））；
});
$（'.description'）。单击（函数（）{
s=window.getSelection（）；
var范围=s.getRangeAt（0）；
var节点=s.anchorNode；
$（'.liveInput'）[0].setSelectionRange（range.startOffset，range.startOffset）；
});
$（“.description”）.hover（函数（）{
$（this.toggleClass（“预览悬停”）；
});
。预览悬停{
光标：文本；
不透明度：0.5；
}


有一个名为
$.caret（）
的jquery插件，可以检测表单输入/文本区域字段中的单击位置，但不能检测段落。这有帮助吗？有一个名为
$.caret（）
的jquery插件可以检测表单输入/文本区域字段中的点击位置，但不能检测段落。这有帮助吗？太棒了，你真是太棒了！很高兴我能帮助你，真是太好了！很高兴我能提供帮助抱歉，但这似乎对我不起作用（谢谢你的帮助！）另一个家伙发布了一些有用的东西。）另一个答案甚至不起作用（当你点击预览时，什么也没发生）。我的回答中到底有什么不起作用？对不起