Hello everyone, program monkey egg brother, today to bring you a small front-end knowledge: H5 textarea input box simple application.

1. How to set the default value in the textarea box?

First, textarea boxes are different from input text boxes: The input tag has a value attribute, and the Textarea tag has no value attribute.

How do YOU set the textarea field? Generally, there are two ways:

<1> Assign directly

<textarea name="comment" rows="3" cols="20" maxlength="500" required>When it rains and slips on the ground, he falls and climbs</textarea>
Copy the code

<2> Get from JStextareaElement and set the default values

Set values using jQuery:

<textarea name="comment" rows="3" cols="20" maxlength="500" required></textarea>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script>
    $(function() {$('textarea[name=comment]').val("Not the glory of god, but your ordinariness.");
    });
</script>
Copy the code

Set values with native JS:

<textarea name="comment" rows="3" cols="20" maxlength="500" required></textarea>
<script>
document.getElementsByName("comment") [0].value="Without the halo of god, you and I are ordinary.";    
</script>
Copy the code

Note: The following assignment is wrong!

Textarea has no value attribute<textarea name="comment" value="Hello World!"></textarea>
Copy the code

2. How to get the value in the textarea box?

A textarea does not differ from an input tag in obtaining a value and is a more general operation.

<textarea name="comment" rows="3" cols="20" maxlength="500" required></textarea>
<br>
<div id="tip"></div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script>
$(function() {$('textarea[name=comment]').change(function() {$('#tip').html('The information you enter in the Textarea box is:' + $(this).val());
    });
});
</script>
Copy the code

3. Other attributes of the Textarea tag

Basic attributes:

Cols: specifies the visible width of the text area rows: specifies the number of visible rows in the text area MaxLength: specifies the maximum number of characters allowed in the text area. Opera and earlier versions of Internet Explorer 9 do not support required

The basic properties above are fairly clear to everyone, so I won’t go into detail.

Here’s another property, wrap: the value hard/soft, specifies how the text in the text area should wrap when the form is submitted.

Note: The emphasis here is on form submission, which is not affected by the wrap attribute if the value is set or retrieved via JS. Soft: Text in the Textarea box is not wrapped when the form is submitted, default. Hard: Text newlines (including newlines) in the Textarea box when the form is submitted. When “hard” is used, the cols attribute must be specified.

Wrap =hard when the textarea textbox is configured with the wrap=hard attribute: