在文本输入控件中，如何用退格替换删除，反之亦然？答案

【问题标题】：In a text input control, how do I replace delete with backspace and vice versa?在文本输入控件中，如何用退格替换删除，反之亦然？
【发布时间】：2019-10-23 08:18:51
【问题描述】：

要求是：在文本输入控件中，当用户按下“删除”键时，应阻止默认结果（使用 e.preventDefault() 可以实现），而应触发“退格”事件。

换句话说：在文本输入控件上，当用户按下键盘上的删除键时，他应该会看到按下键盘上的退格键的效果。

例如，您在文本输入控件中有文本“REACT”。当光标位于“A”和“C”之间时，按键盘上的删除键，它应该删除“A”而不是“C”。

我们如何在 Reactjs 中实现这一点？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

参考此代码！删除被Backspace替换希望这对你有帮助。

        class Todo extends React.Component {
        constructor(props){
          super(props);
          this.state={
            value:''
          }
        }

        handleChange=(e)=>{
          this.setState({
            ...this.state,
            value:e.target.value
          })
        }

       
        onDelete= (e)=>{
          if(e.keyCode === 46)
          {
            e.target.setSelectionRange(e.target.selectionStart-1,e.target.selectionStart);
          }

        }

        render(){
          return (
          <React.Fragment>
            <input 
                 value={this.state.value}
                 onChange={(e)=>this.handleChange(e)}
                 onKeyDown={(e)=>this.onDelete(e)}
                 name = 'txt'
           />
            you type:{this.state.value}
           </React.Fragment>
        )}
        }
        ReactDOM.render(<Todo />, document.getElementById('root'));;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root'></div>

【讨论】：

【解决方案2】：

您只需更新输入值并为其添加一个空格：


const onKeyDown = (e)=>{
 e.preventDefault()
 if(e.key==='Delete')
  e.target.value += " " 
// ...rest
// or update the state(recommended if you have a controlled input)
}

【讨论】：

“你只需更新输入值并在其上附加一个空格”——这种方法太天真了；如果我的光标插入符号没有位于值的末尾...？
我猜你想要排序或事件代理！阻止一个并解雇另一个，但在我们的工艺上，我们首先想到实现目标的最简单的解决方案，然后我们进行迭代！

【解决方案3】：

您可以在 react https://www.npmjs.com/package/react-keyboard-event-handler 中使用该库进行键盘事件。

喜欢

<KeyboardEventHandler
handleKeys={['delete']}
onKeyEvent={(key, e) => /*Your functionality*/}

/>

【讨论】：

谢谢阿努杰。防止（这里的删除操作）很容易，但挑战是用另一个替换它（删除操作要被退格替换）。这就是我要找的。span>

【解决方案4】：

function keyDownEvent(event) {
        var key = event.keyCode;
        if (key == "46") {
            var InputValue = $("#TestInput").val();
            InputValue = InputValue.substr(0, InputValue.length - 1);
            $("#TestInput").val(InputValue);
        }
    }


 <input type="text" id="TestInput" onkeydown="keyDownEvent(event)" />

试试这个代码..

【讨论】：

【解决方案5】：

这就是你想要的，我想

React Hooks 版本

function App() {
  const [value, setValue] = useState("");

  function removeAtIndex(str, index) {
    return str.substring(0, index - 1) + str.substring(index);
  }

  function onChange(event) {
    setValue(event.target.value);
  }

  function onKeyDown(event) {
    if (event.key === "Delete" || event.key === "Backspace") {
      event.preventDefault();
      const { value: str, selectionStart: i } = event.target;
      const index = event.key === "Delete" ? i : i + 1;
      setValue(removeAtIndex(str, index));
    }
  }

  return (
    <div className="App">
      <input {...{ onChange, value, onKeyDown }} />
    </div>
  );
}

React 组件版本

class App2 extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: "" };
  }

  removeAtIndex = (str, index) => {
    return str.substring(0, index - 1) + str.substring(index);
  };

  onChange = event => {
    this.setState({ value: event.target.value });
  };

  onKeyDown = event => {
    if (event.key === "Delete" || event.key === "Backspace") {
      event.preventDefault();
      const { value: str, selectionStart: i } = event.target;
      const index = event.key === "Delete" ? i : i + 1;
      this.setState({ value: this.removeAtIndex(str, index) });
    }
  };
  render() {
    return (
      <div className="App">
        <input
          onChange={this.onChange}
          value={this.state.value}
          onKeyDown={this.onKeyDown}
        />
      </div>
    );
  }
}

【讨论】：