Enter text into textinput by clicking button into where the cursor is

Question

Here I have an input with some buttons that enters text into it;

<input id="input"/>
<button onclick="enter('a')">a</button>
<button onclick="enter('b')">b</button>
<button onclick="enter('c')">c</button>

<script>
function enter(character){
document.getElementById("input").value+=character;
document.getElementById("input").focus();
}
</script>

I want to make these buttons enter a, b and c where the cursor blinks, not at the back at the whole text. What script is needed to achieve this?

@DipankarMaikap well, one button click only enters one letter at a time, so yes, although `a` `b` `c` are only sample texts. — jack, Oct 17 '20 at 16:28
https://stackoverflow.com/questions/11076975/how-to-insert-text-into-the-textarea-at-the-current-cursor-position — Oussama Bouthouri, Oct 17 '20 at 16:34
[Get cursor position (in characters) within a text Input field](https://stackoverflow.com/a/48150864/10078895) could be helpful — vrintle, Oct 17 '20 at 16:35
Possible duplicate of https://stackoverflow.com/q/1064089/12860895 — Aryan Beezadhur, Oct 17 '20 at 16:38

score 1 · Accepted Answer · answered Oct 17 '20 at 16:36

Run this code snippet; this is all the code you need:

function insertAtCaret(areaId, text) {
  var txtarea = document.getElementById(areaId);
  if (!txtarea) {
    return;
  }

  var scrollPos = txtarea.scrollTop;
  var strPos = 0;
  var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ?
    "ff" : (document.selection ? "ie" : false));
  if (br == "ie") {
    txtarea.focus();
    var range = document.selection.createRange();
    range.moveStart('character', -txtarea.value.length);
    strPos = range.text.length;
  } else if (br == "ff") {
    strPos = txtarea.selectionStart;
  }

  var front = (txtarea.value).substring(0, strPos);
  var back = (txtarea.value).substring(strPos, txtarea.value.length);
  txtarea.value = front + text + back;
  strPos = strPos + text.length;
  if (br == "ie") {
    txtarea.focus();
    var ieRange = document.selection.createRange();
    ieRange.moveStart('character', -txtarea.value.length);
    ieRange.moveStart('character', strPos);
    ieRange.moveEnd('character', 0);
    ieRange.select();
  } else if (br == "ff") {
    txtarea.selectionStart = strPos;
    txtarea.selectionEnd = strPos;
    txtarea.focus();
  }

  txtarea.scrollTop = scrollPos;
}

<input id="textareaid" />

<button onclick="insertAtCaret('textareaid', 'a');return false;">a</button>

<button onclick="insertAtCaret('textareaid', 'b');return false;">b</button>

<button onclick="insertAtCaret('textareaid', 'c');return false;">c</button>

_{^{Source: Inserting a text where cursor is using Javascript/jquery}}

Enter text into textinput by clicking button into where the cursor is

1 Answers1

Linked