将值添加到mousecursor为-jQuery的输入中

我有一个带有标签按钮的输入字段。当我单击其中一个按钮时，值进入inputfield

这是我的密码：

<input id="demooutput" type="text" size="15" value="My Text" name="demo" />
<span class="demooutput">
    <a href="#" class="button orange"> A</a>
    <a href="#" class="button orange"> B</a>
    <a href="#" class="button orange"> C</a>
    <a href="#" class="button orange"> D</a>
    <a href="#" class="button orange"> E</a>        
</span>

$('.demooutput a').click(function(){
    $('#demooutput').val($('#demooutput').val() + ' ' + $(this).html());
    return false;
});

$（'.demooutput a'）。单击（函数（）{
$（'demooutput'）.val（$（'demooutput'）.val（）+''+$（this.html（））；
返回false；
});

是否有（使用jQuery？）一种（短）方法可以将值添加到鼠标器所在的位置

例如： “我的输入”的值为“我的文本”。当我将光标放在我的和文本之间并单击标记按钮时，值将转到文本的和。我想要它精确地位于光标所在的位置

查看上的演示以获取光标位置：

然后：

$('.demooutput a').click(function(){
  var cursorPosition = cursorPostitonFromLinkAbove();
  var originVal = $('#demooutput').val();
  var res = originVal.substring(0,cursorPosition) + $(this).html() + originVal.substring(cursorPosition);
  $('#demooutput').val(res)
  return false;
});

---

用这个替换你的JS代码

 $('.demooutput a').click(function(){
   var caretPos = document.getElementById("demooutput").selectionStart;
   var textAreaTxt = jQuery("#demooutput").val();
   var txtToAdd = $(this).html();
   jQuery("#demooutput").val(textAreaTxt.substring(0, caretPos) + txtToAdd +    textAreaTxt.substring(caretPos) );
    return false;
});

---

我几个小时前给你回过电话。现在试试这个代码

$（'.demooutput a'）。单击（函数（）{
$（'#demooutput'）.html（$（'#demooutput'）.html（）+'+$（this.html（）+）；
返回false；
});
$（'body'）。在({
mouseenter:function（）
{
$（“#删除”）.fadeIn（）；
$（'#delete'）.css（'left'，$（this）.position（）.left++$（this）.width（）++$（'#delete'）.width（）++'px'）；
$（'#delete'）.css（'top'，$（this）.position（）.top-5+'px'））
}
，mouseleave:function（）
{
}}，'.tag'）
;

---

如果你想帮助我，请给我留言。

我现在用以下代码来做：

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();
    }
  });
}
});


$('.demooutput a').click(function(){
    var txtToAdd = ' ' + $(this).html() + ' ';
    $('#demooutput').insertAtCaret(txtToAdd);
    return false;
});

请参见

它适用于我所有的浏览器：

火狐2.0

火狐16

火狐18

火狐22

Internet Explorer 8

Internet Explorer 10

铬23

---

嗨，菲尔。。我收到此错误消息：error:ReferenceError:CursorPostitonFromLinkUpper当然没有定义，因为没有定义CursorPostitonFromLinkUpper。它必须由Hi Yashpatel上方链接中的实现方法替换。。你的代码在IE8中遇到了一些问题！当我点击一个我收到“我的短信艾米短信”，当我再次点击一个我收到“我的短信艾米短信艾米短信艾米短信艾米短信”时，它都会被复制和粘贴。你有什么想法吗？嗨，哈米德。。无法使用您的版本。我需要将标签直接添加到inputfield中。对于被接受的答案仍然有问题：DHi亲爱的朋友。我祝你成功：D找到解决方案：D如果你愿意，你可以阅读我的答案！也许你会发现一些虫子。。但它的工作lol:D

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();
    }
  });
}
});


$('.demooutput a').click(function(){
    var txtToAdd = ' ' + $(this).html() + ' ';
    $('#demooutput').insertAtCaret(txtToAdd);
    return false;
});

<input id="demooutput" type="text" size="15" value="My Text" name="demo" />
<span class="demooutput">
    <a href="#" class="button orange">A</a>
    <a href="#" class="button orange">B</a>
    <a href="#" class="button orange">C</a>
    <a href="#" class="button orange">D</a>
    <a href="#" class="button orange">E</a>        
</span>