Question

我正在寻找一些方法来限制带有react和es6的textarea的行和字符。我发现了一些方法，但它们并不适用于所有浏览器，例如e.key，我可以限制一行的字符。我希望有一个文本区域，每行只能有5行和40个字符。

应该是

Line 1 -> 1234567890123456789012345678901234567890
Line 2 -> 1234567890123456789012345678901234567890
Line 3 -> 1234567890123456789012345678901234567890
Line 4 -> 1234567890123456789012345678901234567890
Line 5 -> 1234567890123456789012345678901234567890

我已经尝试过：

add(event){
    let allowedLines = 4;
    let lineLength = 40;
    let maxTextLength = 200;

    if(!(this.state.textAreaValue.length % lineLength)){
        this.setState({
            textAreaValue: this.state.textAreaValue + "\n"
        });
    }

    let maxLines = this.state.textAreaValue.split("\n");
    if(this.state.textAreaValue < maxTextLength
        && maxLines.length <= allowedLines){

        this.setState({
            textAreaValue: this.state.textAreaValue + event.key
        });
    }
}
render(){
    let textValue = this.state.textAreaValue;
    return (
        <textarea className="textArea-big" id="textarea" rows="5" cols="40"
        placeholer="some placeholer here" onKeyPress={this.add} value={textValue} />
    );
}

我希望有人可以帮助我。 THX

Answer 1

好吧，找到了解决方案，但我认为可能有更好的方法。这是我的解决方案：

setTextAreaFormat() {
    let lines = [];
    let text = "";
    let maxLines = 5;
    let maxTextForLine = 40;
    text = document.getElementById("textarea").value;

    if(text.length >= maxTextForLine){
        lines = text.match(/.{1,35}/g);
    }
    if(lines.length > maxLines){
        lines.length = maxLines;
    }
    if(lines.length > 0){
        document.getElementById("textarea").value = lines.join("\n");
    } else {
        document.getElementById("textarea").value = text;
    }
}

ReactJS ES6限制textarea中的行和字符

1 个答案: