前端小点：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时，效果图以下：