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