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

CaixK
  • 491

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

回复
阅读 1.1k
3 个回答
✓ 已被采纳

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

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

凭栏知潇雨
  • 3
新手上路,请多包涵

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏