How to add line breaks in HTML textbox?-HTML Tutorial-php.cn

How to add line breaks in HTML textbox?

王林

Release： 2023-09-04 11:05:06

forward

2364 people have browsed it

How to add line breaks in HTML textbox?

To add a line break to an HTML text area, we can use the HTML line break tag to insert a line break anywhere. Alternatively, we can also use the CSS property "white-space: pre-wrap" to automatically add line breaks to the text. This is particularly useful when displaying preformatted text in a text area. So let’s discuss ways to add line breaks.

method

Create a text area in HTML and assign it an id.
Create a button that when clicked will split the text of the text area using line breaks.
Now create the function that splits the text into newlines. The code of this function is -

function replacePeriodsWithLineBreaks() {
   // Get the textarea element
   var textarea = document.getElementById("textarea");
   
   // Get the text from the textarea
   var text = textarea.value;
   
   // Replace periods with line breaks
   text = text.replace(/\./g, "");
   
   // Update the textarea with the new text
   textarea.value = text;
}

Copy after login

Example< /p>

The final code for this method is -

<!DOCTYPE html>
<html>
<head>
   <title>Add Line Breaks</title>
</head>
   <body>
      <textarea id="textarea" rows="10" cols="50"></textarea>
      <br>
      <button id="replace-btn" onclick="replacePeriodsWithLineBreaks()">Replace Periods with Line Breaks</button>
      <script>
         // Function to replace periods with line breaks in the textarea
         function replacePeriodsWithLineBreaks() {
            // Get the textarea element
            var textarea = document.getElementById("textarea");
            
            // Get the text from the textarea
            var text = textarea.value;
            
            // Replace periods with line breaks
            text = text.replace(/\./g, "");
            
            // Update the textarea with the new text
            textarea.value = text;
         }
      </script>
   </body>
</html>

Copy after login

In this example, the JavaScript code first gets the textarea element by its id using the getElementById() method. It then uses the value attribute to get the text from the text area. Next, it uses the Replace() method to replace all instances of periods with newlines. Finally, it updates the text area with the new text using the value attribute.

Note: The g flag in the regular expression /\./g is used to replace all occurrences of periods. Without it, only the first occurrence will be replaced.

The above is the detailed content of How to add line breaks in HTML textbox?. For more information, please follow other related articles on the PHP Chinese website!