项目场景：

使用input输入框，但是想让在input框输入的空格、tab、回车等在网页上直接显示，那么可以使用pre来展示。

解决方案：

element的el-input输入框：

                    <el-inputtype="textarea":autosize="{ minRows: 8, maxRows: 8 }"style="width:444px"v-model="createWorksheetsForm.problemDesc"placeholder="请输入问题描述":maxlength="5000"show-word-limit></el-input>

保存的数据展示：

<pre>{{ worksheetsDetail.problemDesc }}</pre>

样式书写：

<style lang="less" scoped>
pre {display: inline-block;padding: 0;margin: 0;font-size: 12px;color: #333;background-color: transparent;border: none;border-radius: 2px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;line-height: 17px;max-width: 100%;white-space: pre-wrap;white-space: -moz-pre-wrap;white-space: -pre-wrap;white-space: -o-pre-wrap;word-wrap: break-word;word-break: break-all;vertical-align: middle;
}
</style>

展示效果：

注意：

1、pre标签默认是不给换行的，所以需要换行的样式，不加的话太长的句子会一行展示不换行：

pre {max-width: 100%;white-space: pre-wrap;white-space: -moz-pre-wrap;white-space: -pre-wrap;white-space: -o-pre-wrap;word-wrap: break-word;word-break: break-all;vertical-align: middle;
}

2、pre有自带的样式，需要将那些样式覆盖掉，换为自己的项目所需样式。

前端使用el-input输入框保存的数据，怎么样在展示时显示输入的空格、tab、回车，可以使用pre标签相关推荐

ios html 全选文本框,【前端】IOS input输入框按删除键删除字符，删除最后一个字符时，概率性出现光标前面多余一个字符...
IOS input输入框按删除键删除字符,删除最后一个字符时,概率性出现光标前面多余一个字符,并且placeholder文字也能显示出来回答删除最后一个字符时延迟一毫秒我用了vue,input[ ...
解决手机端微信公众号内input输入框获取焦点后，底部导航栏显示在输入法软键盘上面的问题
今天遇到在微信公众号中打开网站,input 输入框和textarea输入框获取焦点后,弹出输入法键盘,将底部的导航栏"顶到"输入法键盘上面的问题,看着非常shit! 直接上代码看效 ...
前端基础JS——input输入框的oninput事件和onchange事件
在开发过程中,input用的比较多的是change事件,忽略了还有input事件. onchange--input输入过程中不会触发,失去焦点时才会触发: 兼容性:所有浏览器都支持,可以用于& ...
前端----HTML/JS 鼠标停留和移开实例----鼠标指示时显示二级菜单(共三级)
onmouseover和onmouseout事件和各种position定位的练习, 效果是鼠标指示一级菜单显示二级菜单, 指示二级菜单的选项出现相应三级菜单效果图: 一级菜单: 鼠标停留时的二级菜: ...
input输入框模拟验证码输入效果
今天看到一个帖子,说到用input输入框模拟滴滴.摩拜等app验证码输入效果,提到了一个方案: 1.利用input来获得焦点,自动调用手机的数字键盘 2.实际将输入框用透明度隐藏 3.用label的f ...
html获取文本框中的文字,JavaScript实现input输入框点击获取文字内容
Js实现INPUT输入框,当鼠标点击文字时自动获取文字内容,并显示在文本框中,一个惯用的表单技巧,有时可省去一些用户输入的麻烦,可有效提升用户体验. input输入框获取js点击文字内容 .c{ wi ...
input输入框事件流程变化
从聚焦到失去焦点,以下事件会根据情况,先后判断是否会执行. onfocus -> 键盘输入 -> onkeydown -> onkeypress -> onkeyup -> ...
去除input边框和去除当点击input框时显示的边框
去掉input框的边框以及当点击时显示的边框解决方法: http://www.yayihouse.com/yayishuwu/chapter/1407
php实现input输入框失去焦点自动保存输入框的数据
最近做一个输入框失去焦点时自动保存数据的功能,当然就是jQuery选择器选择input,blur时,ajax提交数据给php文件,php文件保存一下数据咯.主要是要注意一下中文的问题,所以中间需要转一 ...

前端使用el-input输入框保存的数据，怎么样在展示时显示输入的空格、tab、回车，可以使用pre标签

项目场景：

解决方案：

前端使用el-input输入框保存的数据，怎么样在展示时显示输入的空格、tab、回车，可以使用pre标签相关推荐

最新文章

热门文章