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。当我将光标放在“我的”和“文本”之间并单击标记按钮时，该值将转到“文本”和“文本”。我想要它正好在光标所在的位置。

查看 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>

见 DEMO

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

Firefox 2.0
Firefox 16
Firefox 18
Firefox 22
Internet Explorer 8
Internet Explorer 10
Chrome 23

Answer 2

获取光标位置： Get cursor position (in characters) within a text Input field

然后：

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

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

Answer 4

我几小时前回答你。现在试试这段代码 fiddle

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

;

如果你想帮我评论一下。

为mousecursor所在的输入添加值 - jQuery

4 个答案: