点击后jquery获取光标位置

我有一个包含大量输入/ textareas的表单，使用表单的管理员可以在文本中添加动态值，例如：page title =“Hi {name}，welcome to {shop_name}”。 在表单的底部，我有一个包含所有可用动态值的列表。

问：我要做的是点击列表中的值，找出焦点上的前一个输入并插入值。

更简单的说明如何使这个jsFiddle为这个input = text工作与textarea相同？ 因此，如果我将光标放在输入字段中，它将在那里添加foo值而不是textarea。

HTML

 Name:  Message: Lorem ipsum dolor sit amet, consectetur adipiscing elit.   
 
Insert short code
 
 
Foo 1
 
Foo 2
 
Foo 3
 
Foo 4
 
Foo 5
  

JS

 jQuery.fn.extend({ insertAtCaret: function (myValue) { return this.each(function (i) { if (document.selection) { //For browsers like Internet Explorer this.focus(); var sel = document.selection.createRange(); sel.text = myValue; this.focus(); } else if (this.selectionStart || this.selectionStart == '0') { //For browsers like Firefox and Webkit based var startPos = this.selectionStart; var endPos = this.selectionEnd; var scrollTop = this.scrollTop; this.value = this.value.substring(0, startPos) + myValue + this.value.substring(endPos, this.value.length); this.focus(); this.selectionStart = startPos + myValue.length; this.selectionEnd = startPos + myValue.length; this.scrollTop = scrollTop; } else { this.value += myValue; this.focus(); } }); } }); $(".inserts a").click(function (e) { e.preventDefault(); $('textarea').insertAtCaret( $(this).data("foo") ); }); 

Answer 1

一种简单的方法是将光标的最后位置存储在变量的输入字段中。 单击一个按钮后，您可以轻松地将值插入所需位置。 足够的思考？ ;）

编辑：要在位置x上插入字符串，您可以使用此jQuery插入符插件或在位置x上拆分原始输入内容并在其间添加新内容。

也许你也想看一下这个post 。

我的解决方案如下：

 var pos = 0; $('yourField').on('click keypress', function () { pos = $(this).caret().start }); // inside your click function you can use the following // $.fn.caretTo( index , [ offset ] ) // to add input to a specific position