add value to input where mousecursor is - jQuery

Question

i got an inputfield with tag buttons. when i click on one of these buttons the value goes into the inputfield.

here is my code:

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

is there a (short) way (with jQuery?) to add the value right where the mousecursor is?

Example: My input has the value My Text. When i put the cursor between My and Text and click a tag button the value goes to the and of Text. I want it exactly where the cursor is.

See a demo on JSFIDDLE

bernte · Answer 1 · 2013-07-30T07:24:56.773

i do it now with this code:

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>

see DEMO

it works perfect with all browsers i got:

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

score 0 · Answer 2 · edited May 23 '17 at 12:20

0

To get cursor position: Get cursor position (in characters) within a text Input field

And then:

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

edited May 23 '17 at 12:20

Community

1
1

answered Jul 28 '13 at 17:38

phts

3,889
1
19
31

Hi Phil.. i receive this error message: Error: ReferenceError: cursorPostitonFromLinkAbove is not defined – bernte Jul 28 '13 at 17:49
Of course, because cursorPostitonFromLinkAbove is not defined. It must be replaced by implemented method from the link above – phts Jul 28 '13 at 17:51

score 0 · Accepted Answer · answered Jul 28 '13 at 18:01

0

Just Replace Your JS Code With this

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

answered Jul 28 '13 at 18:01

YashPatel

295
1
2
9

hi Yashpatel.. got some problems in IE8 with your code! when i click on A i receive "My TextAMy Text" and when i click again on A i reveice "My TextAMy TextAMy TextAMy Text" it will all copied and pasted. do you have any ideas? – bernte Jul 29 '13 at 10:33

score 0 · Answer 4 · answered Jul 28 '13 at 18:22

0

I answered you recent hours ago. Now try this code 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')

;

If you want to help just comment me.

answered Jul 28 '13 at 18:22

Hamed Khosravi

535
7
21

hi hamed.. can't use your version. i need to add the tags direct into the inputfield. still got problems with the accepted answer :D – bernte Jul 29 '13 at 10:42
1

Hi dear friend.I wish you success :D – Hamed Khosravi Jul 29 '13 at 12:04
1

found a solution :D you can read my answer if you want! maybe you find some bug.. but its working lol :D – bernte Jul 29 '13 at 17:53

add value to input where mousecursor is - jQuery

4 Answers4