input插入文字

摘要：最近做项目，其中有一个拨号盘，最开始感觉不太好实现，后续经过实验可以通过几个实用的方法去实现插入文字;

项目中用的是react,但是大差不差

/*
onKeyPress: 键盘按下事件; 因为输入框的内容由拨号盘控制，所以阻止了键盘输入;
onPaste: 复制事件; 因为输入框的内容由拨号盘控制，所以静止了复制;
onKeyUp: 释放键盘事件; 因为前面虽然拦住了表面，但没有拦住输入法，所以做了正则移除不匹配的内容;
onBlur: 失去焦点事件; 失去焦点的时候记录一下最后一次光标的位置;
id: 后面需要通过id进行获取焦点; 获取光标前后内容的下标，并再中间插入文本内容;
lastSelection: 最后一次焦点位置; 用的react所以我选择了useRef,反正存下来就行;
*/
let lastSelection = useRef<any>(null);

<input id="yyh" onKeyPress={(event) => {preventDefault();}} 
 onPaste={(event) => {event.preventDefault(); }}
 onKeyUp={(event: any) => {
  event.target.value = event.target.value.replace(/[^\d\*\#]/g,'');
}}
onBlur={() => {
  const selection = getSelection();
  if (!selection) return;
  lastSelection.current = selection.getRangeAt(0);
}}
type="text"/>

插入文本内容

<button onClick={() => insertText()}>准备插入文字</button>

function insertText(){
    /*获取input，后续有用*/
    const inputEl: any = document.getElementById('yyh');
    const selection: any = getSelection();
    if (!selection) return;
    // 指定到最后一次光标位置
    selection.addRange(lastSelection.current);
    // 准备获取焦点
    inputEl.focus();
    // 获取光标开始下标
    var startPos = inputEl.selectionStart;
    // 获取光标结束下标
    var endPos = inputEl.selectionEnd;
    // 当前input的内容
    let value = inputEl.value;
    // 获取插入后的新值
    let newValue = value.substring(0, startPos) + '1' + value.substring(endPos, value.length);
    // 把新的值付给input
    inputEl.value = newValue;
    /*
    // 默认改变后光标会跑到最后，这里可以设置开始位置加你插入文本的length，光标移动到你插入文字的后面
    if (inputEl.setSelectionRange) {
        inputEl.focus()
        inputEl.setSelectionRange(startPos + 1, startPos + 1);
    }
    */
}