Limit line breaks in textarea-CodePudding

I have a text area, where i want to allow users to make line break by pressing enter, but i want to limit that to only one break, because then the users could add as many breaks they want, creating huge white space in the output.

  <textarea maxLength={3000} onChange={(e) => setPersonBio(e.target.value)} value={personBio} type="text" rows="5" className="bio-content" placeholder="Enter something about yourself..."></textarea>

And then i display it in <p> tag with white-space: pre-line;

My question is how to limit the amount of breaks user can enter, or delete the additional ones after submitting.

CodePudding user response：

You can use the String methods search and include inside a while loop to remove all but one of a given repeated character.

text = "abc\n\n\ndef\n\nghi"; 
document.write('<textarea rows=6>' text '</textarea>');
while (text.includes("\n\n"))
  text = text.replace("\n\n","\n");
document.write('<textarea rows=6>' text '</textarea>');

CodePudding user response：

You could try this:

 <textarea maxLength={3000} onChange=textAreaChange(e) value={personBio} type="text" rows="5" className="bio-content" placeholder="Enter something about yourself..."></textarea>

var pre="";
function textAreaChange(e){
    if(e.target.value.split("\n").length>1){
        e.target.value=pre;
        return;
    };
    setPersonBio(e.target.value);
    pre=e.target.value;
};

Add the javascript to where you keep all your other javascript for this site.