Textarea：如何在按下 ALT + ENTER 时允许换行？

Question

我正在使用 React 并有一个 Textarea。我已将一个操作绑定到 Enter，这样它就不再创建换行符。使用 SHIFT + ENTER 也不是一种选择。当我尝试使用 ALT + ENTER 时，它不起作用。 Stack Overflow 文本区域也可以证明这一点。当我检测到 ALT + ENTER 时，有没有办法以编程方式触发 Enter 键？

Answer 1

假设它是一个常规的 HTML 文本区域，使用 JavaScript 您可以使用以下代码片段以编程方式添加新行

var textarea = document.querySelector('#textarea');
textarea.value = textarea.value + "\r\n";

事件的完整示例如下所示

document.addEventListener('keydown', function(event) {
    if(event.altKey) {
       this.setState({
           altKey: true
       });
    }

    if((event.keyCode == 13 || event.which == 13) && this.state.altKey) {
        var textarea = document.querySelector('#textarea');
        textarea.value = textarea.value + "\r\n";
    }
});

document.addEventListener('keyup', function() {
       this.setState({
           altKey: false
       });
}

在这里，当您的组件加载并在 componentDidMount().

中添加 eventListener 时，您将在您的状态中将 altKey 定义为 false

Answer 2

这是我的方式，我觉得很棒，我喜欢，享受！

import React, { Component } from 'react';

export default class myComp extends Component {

    constructor(props) {
        super(props);
        let state = {msg_text:""};
        this.state                      =   state;
        this.handleChange               =   this.handleChange.bind(this);
        this.addNewLineToTextArea       =   this.addNewLineToTextArea.bind(this);
    }  

    onKeyPress = (e) => {
        if (e.keyCode === 13 && e.shiftKey) {
            e.preventDefault();
            this.addNewLineToTextArea();
        }
    };  


    addNewLineToTextArea(){
        let msg_text = this.state.msg_text+"\r\n";
        this.setState({msg_text: msg_text});
    }


    handleChange(funcArg) {
        let new_state = {};
        new_state[funcArg.name] = funcArg.event.target.value;
        this.setState(new_state);
        funcArg.event.target.setCustomValidity("");
    }

  render() {
        return (
             <div>
                  <textarea rows="3" placeholder="write..." onChange={(e) => 
                       this.handleChange({"event":e,"name":"msg_text"})} onKeyDown={this.onKeyPress} 
                       value={this.state.msg_text || ''}  >
                  </textarea> 
             </div>
            )}
        }

Textarea：如何在按下 ALT + ENTER 时允许换行？

Textarea: How do I allow newline on ALT + ENTER pressed?

javascript

textarea

reactjs