在文本輸入控件中，如何用退格替換刪除，反之亦然？

Question

要求是：在文本輸入控件中，當用戶按下“刪除”鍵時，應阻止默認結果（使用 e.preventDefault() 可以實現），而應觸發“退格”事件。

換句話說：在文本輸入控件上，當用戶按下鍵盤上的刪除鍵時，他應該看到按下鍵盤上的退格鍵的效果。

例如，您在文本輸入控件中有文本“REACT”。 cursor 在“A”和“C”之間，按鍵盤上的刪除鍵，它應該刪除“A”而不是“C”。

我們如何在 Reactjs 中實現這一點？

Answer 1

您只需更新輸入值和 append 一個空格：

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

Answer 2

您可以在 react https://www.npmjs.com/package/react-keyboard-event-handler中使用該庫進行鍵盤事件。

喜歡

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

/>

Answer 3

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)" />

試試這個代碼..

Answer 4

這就是你想要的，我想

反應鈎子版本

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>
  );
}

反應組件版本

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>
    );
  }
}

Answer 5

請參閱本守則。 刪除替換為退格希望這對您有所幫助。

 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>