textarea里的文本换行问题

Fri Jul 24 13:10:31 CST 2015 546 Web

文章摘要在使用<textarea>标签时,如果在页面加载的时候就把文本渲染在标签内,容易出现一些排版的问题,如多了空格等等。这是由于<textarea>标签静态设置文本和动态设置文本有不同的规则。

看如下标签

<textarea>
    hello
    world
</textarea>

若在你的IDE设置中,tab被设置为4个空格的话,那么页面显示出来的两行“hello”和“word”在textarea中,会出现在四个空格后面;

若要解决这个问题,可以在html文档加载完成后,用javascript动态去设置textarea的innerHTML,在这里支持使用“\r\n”换行。

<textarea id="mytext">
    hello
    world
</textarea>
<script>
    $(function(){
        $("#mytext").text("hello\r\nworld");
    })
<script>


打赏
打赏

分享到: