毕业论文

当前位置: 毕业论文 > 范文 >

textarea换行符如何实现换行

时间:2021-12-20 17:56来源:优尔论文
textarea换行符如何实现换行,很简单,利用html换行符 或 。

textarea换行符如何实现换行,很简单,利用html换行符
或
。

<textarea cols="15" rows="5">To:优尔论文网&#10;你好!&#13;再见!</textarea>
如果,如果你连这个都搞不定,还好意思说自己对HTML精通吗?多看点正经书!!!

当我们使用 textarea 在前台编辑文字,并用 js 提交到后台的时候,空格和换行是我们最需要考虑的问题。在textarea 里面,空格和换行会被保存为/s和/n,如果我们前台输入和前台显示的文字都是在 textarea 里面,其实并不需要做任何处理,你在 textarea 里面编写的样式会按照你之前编辑时候的样式,正确的显示出来。textarea换行符如何实现换行

 

那么如果你需要 textarea 编辑提交的文字,从后台返回之后,不是显示在 textarea 里面,那么就需要考虑处理空格和换行啦。

 

其实之前在接触的时候,完全没有考虑过这些问题,也是因为最近做的项目里面有一个这样子的需求,要求用户在 textarea 输入文字,提交之后以文章的格式显示在页面上。不管用户输入的时候打了多少空格,默认每段文字都只缩进2个字符,且要考虑用户上传的诗歌形式,也就是每个段落之间可能有两行空白。总而言之一句话总结呢,就是—去掉用户的输入的空格,保留段落之间的换行。

 

那么我最终的做法就是,在保存的时候还是不做任何处理,直接保存到后台。显示的时候,从后台获取到文本之后,去掉文中的所有空格,然后显示在<pre>标签里面。

 

这里我用一个小例子来示意一下textarea在各种情况下的保存和显示。首先创建一个简单的 html 页面,为了方便获取数据和显示,我引入 vue 来处理数据,给提交按钮绑定一个点击事件,点击确定之后,显示在下面。基本的页面结构和 js 如下:textarea换行符如何实现换行

 

<p class="app">

    <p>请输入内容:</p>

    <textarea name="t1" rows="8" cols="80" v-model="text1"></textarea>

    <button>提交</button>

    <p>显示的内容:</p>

    <textarea name="t2" id="" cols="80" rows="8" v-model="text2"></textarea>

</p>

 

// js部分

const vm = new Vue({

    el:'#app',

    data:{

        text1:'',

        text2:''

    },

    methods:{

        submitText(){

            this。text2 = this。text1;

        }

    }

})

不处理空格和换行 显示在 textarea 里面

这一步就很简单了,直接点击提交,可以看到效果,如下图。在未做任何处理的情况下,保留了所有的空格和换行,适合保存再编辑。

 

 

 

不处理空格和换行 显示在 p 里面

把刚刚第二个 textarea 替换成 p ,效果如下图。可以看到空格和换行符都没有被处理出来,直接被忽略掉了。

 

<p id="app">

    <p>请输入内容:</p>

    <textarea name="t1" rows="8" cols="80" v-model="text1" ></textarea> textarea换行符如何实现换行:http://www.youerw.com/fanwen/lunwen_86731.html

------分隔线----------------------------
推荐内容