Limit line breaks in textarea

Question

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.

Answer 1

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.

Answer 2

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

 let 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>');