如何防止从 React 输入标签中删除某些字符？答案

【问题标题】：How can I prevent certain characters from being deleted from a React input tag?如何防止从 React 输入标签中删除某些字符？
【发布时间】：2022-11-03 14:32:52
【问题描述】：

我想知道如何防止特定字符串被删除，即使我从输入中按退格键传递了值。

产品：[none_fix]changeValue

即使按退格键，我也想防止删除 [none_fix] 部分。

【问题讨论】：

例如，为什么不将[none_fix] 移动到 span 元素？
@youdateme 我想创建一个新标签，但有要求。

标签： javascript reactjs

【解决方案1】：

通过将input 设为Controlled Component，您可以决定输入显示的值。将您需要的任何逻辑放入输入的 onChange 处理程序中 - 所以在这种情况下，不要传播会导致 UNERASABLE_TEXT 被删除的更改：


const UNERASEABLE_TEXT = "[none_fix]";

export default function App() {
  const [controlledValue, setControlledValue] = useState(UNERASEABLE_TEXT);

  const onInputChanged = (e) => {
    const newValue = e.target.value;
    // Only allow changes that retain the magic string:
    if (newValue.startsWith(UNERASEABLE_TEXT)) {
      setControlledValue(newValue);
    }
  };

  return <input onChange={onInputChanged} value={controlledValue} />;
}

【讨论】：

【解决方案2】：

您可以在其中编写平面 javascript，这对您有用。即使您的“[none_fix]”有多个条目，这也适用。假设这里我们不想删除“_”，即使用户按下退格键或删除它。

以下3种情况可以删除。

用户按下退格键并删除光标前的字符用户按下canc并删除光标后的字符用户选择文本并按退格键或取消键并删除所选文本

    const textDom = document.getElementById('desiredId');
  if (textDom) {
    textDom.addEventListener('keydown', (e) => {
      let allowClear = true;
      const start = textDom.selectionStart;
          const end = textDom.selectionEnd;
          const { value } = textDom;
          const key = e.keyCode;
          if (key === 8 && value[start - 1] === '_') allowClear = false;
      if (key === 46 && value[start] === '_') allowClear = false;
      if ((key === 8 || key === 46) && value.substring(start, end).indexOf('_') !== -1) allowClear = false;
      if (allowClear === false) {
        console.error('Editing certain characters not allowed);
        e.preventDefault();
      }
    }, false);

【讨论】：