react 关于textarea文本框前面固定的几个字保证不被删除的简单实现

一.主要是在textarea(antd的TextArea组件也可以这么使用)参数中加上disable参数和onKeyDown参数:

disabled={rtnTxtDisabled}
                onKeyDown={e => {
                  const targetStr = preRtnTxt;
                  const endIdx = targetStr.length;
                  const nowStartIdx = e.target.selectionStart;
                  const nowEndIdx = e.target.selectionEnd;
                  const targetElement = e.target;
                  if (nowStartIdx <= endIdx && e.keyCode === 8) {
                    setRtnTxtDisabled(true);
                    setTimeout(() => {
                      setRtnTxtDisabled(false);
                      showError(`"${targetStr}"不能删除`);
                      triggerTextRange(endIdx, nowEndIdx, targetElement);
                    }, 0);
                  } else {
                    setRtnTxtDisabled(false);
                  }
                }}

补充说明:

1.rtnTxtDisabled变量默认为false

2.preRtnTxt为输入内容的最左边不能修改的几个字

二.找到textarea的具体某段字符串高亮
  const triggerTextRange = (startPos: number, endPos: number, target: any) => {
    const ta1: any = target || {};
    try {
      ta1.focus && ta1.focus();
      ta1.setSelectionRange && ta1.setSelectionRange(startPos, endPos);
    } catch (error) {}
  };

实际使用中发现了一些问题:

1.如果用户使用剪切还是能够删除内容的, 所以上面那个方法局限性很大,建议输入框onFocus时删除前缀,onBlur把前缀加回去, 前端判断压力少一点

2.更可靠的是直接把前缀使用p标签加在textarea标签上面纯展示,不允许修改,textarea标签输入内容,然后点击提交按钮时将文本框参数加上前缀就行了