前端遇到一个骚操作需求，各位帮我分析分析

Question

前端实现点击按钮随光标对文本框输入数值
右边一个文本输入框
左边一排按钮
文本框可以自行编辑，点击按钮把对应的值输入到光标处。
点击按钮文本不就失焦了....？实现思路是啥，或者怎么说服产品

Answer 1

给你：
在线Demo地址：https://codepen.io/lssssi-163-com/pen/XWedBKZ

 <input type="text" id="ipt" />
 <button id="btn">点击插入文字</button>

const btn = document.getElementById("btn");
const ipt = document.getElementById("ipt");
const insertAtCursor = (elem, value) => {
  var field = elem;
  var newValue = "";
  // IE support
  if (document.selection) {
    field.focus();
    var sel = document.selection.createRange();
    sel.text = newValue = value;
    sel.select();
  } else if (field.selectionStart || field.selectionStart === 0) {
    var startPos = field.selectionStart;
    var endPos = field.selectionEnd;
    var restoreTop = field.scrollTop;
    newValue =
      field.value.substring(0, startPos) +
      value +
      field.value.substring(endPos, field.value.length);
    if (restoreTop > 0) {
      field.scrollTop = restoreTop;
    }
    field.value = newValue;
    field.dispatchEvent(new CustomEvent("input"));
    field.focus();
    setTimeout(function () {
      field.selectionStart = startPos + value.length;
      field.selectionEnd = startPos + value.length;
    }, 0);
  } else {
    newValue = field.value + value;
    field.value = newValue;
    field.dispatchEvent(new CustomEvent("input"));
    field.focus();
  }
};
btn.onclick = () => {
  insertAtCursor(ipt, "文字");
};

Answer 2

input 的 focusout 事件可以通过 e.target.selectionStart 拿到光标位置，然后就是拿到输入框内容，进行字符串操作了。

Answer 3

输入框聚焦时记录下是哪个输入框，点击按钮之后把记录下的输入框的内容填充上去然后触发输入框聚焦