jquery - 向鼠标光标所在的输入添加值 - jQuery

Question

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

这是我的代码：

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

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

示例：我的输入具有值 My Text。当我将光标放在 My 和 Text 之间并单击标签按钮时，值转到 Text 的和。我想要它恰好在光标所在的位置。

在JSFIDDLE上查看演示

Answer 1

我现在用这段代码来做：

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>

见演示

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

1. 火狐2.0
2. 火狐 16
3. 火狐 18
4. 火狐 22
5. 互联网浏览器 8
6. 互联网浏览器 10
7. 铬 23

Answer 2

获取光标位置： 获取文本输入字段中的光标位置（以字符为单位）

接着：

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

Answer 3

我最近几个小时前回答了你。现在试试这个代码 小提琴

    $('.demooutput a').click(function(){
        $('#demooutput').html($('#demooutput').html() + ' <span class="tag">' + $(this).html() +"</span>");
        return false;
    });

            $('body').on({
                mouseenter:function()
            {
                  $('#delete').fadeIn();
                $('#delete').css('left',$(this).position().left + $(this).width() + $('#delete').width() + 'px');
                $('#delete').css('top',$(this).position().top - 5 + 'px')
            }
            ,mouseleave:function()
            {

            }},'.tag')

;

如果你想帮助就评论我。

Answer 4

只需用这个替换你的 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;
});