前端小點：H5中textarea輸入框的簡單應用

你們好，程序猿蛋蛋哥，今天爲你們帶來一個前端小知識點：H5中textarea輸入框的簡單應用。

1. textarea框中怎麼設置默認值？

首先textarea框與input text框不一樣：input標籤有value屬性，textarea標籤沒有value屬性。

那textarea框怎麼設置值呢？通常有兩種方式：

<1> 直接賦值

<textarea name="comment" rows="3" cols="20" maxlength="500" required>天上下雨地上滑，本身跌倒本身爬</textarea>
複製代碼

<2> 經過js獲取textarea元素，並設置默認值

經過jQuery設置值：

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

<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script> $(function() { $('textarea[name=comment]').val("不要神的光環，只要你的平凡"); }); </script>
複製代碼

經過原生js設置值：

<textarea name="comment" rows="3" cols="20" maxlength="500" required></textarea>
<script> document.getElementsByName("comment")[0].value="沒有神的光環，你我生而平凡"; </script>
複製代碼

注意：下面的賦值操做是錯誤的！

textarea沒有value屬性
<textarea name="comment" value="Hello World!"></textarea>
複製代碼

2. textarea框中怎麼獲取值？

textarea與input標籤在獲取值上沒有區別，是比較常規的操做。

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

<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script> $(function() { $('textarea[name=comment]').change(function() { $('#tip').html('你在textarea框中輸入的信息爲：' + $(this).val()); }); }); </script>
複製代碼

3. textarea標籤的其餘屬性

基本屬性：

cols：指定文本區域可見寬度 rows：指定文本區域可見行數 maxlength：指定文本區域容許最大字符數，Opera和IE9以前版本不支持 required：文本區域必填，IE和Safari不支持

上面的基本屬性你們都比較清楚，再也不細說。

這裏介紹另一個屬性wrap：取值hard/soft，規定當提交表單時，文本區域中的文本應該怎樣換行。

注意：這裏強調的是表單提交，若是是經過js設置值或者獲取值，不受wrap屬性影響。 soft：表單提交時，textarea框中的文本不換行，默認。 hard：表單提交時，textarea框中的文本換行（包含換行符）。當使用 "hard" 時，必須指定cols屬性。

當textarea文本框配置屬性wrap=hard時，效果圖以下：