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

Z时代
2024-02-25
分类：IT

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

回答：

给你：
在线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, "文字");
};