先说下问题，再上解决方案：

span编辑时有多余空格和回车会影响样式（我用的是span便以此为例）

代码：（有换行符）

效果图：

代码：（无换行符）

效果图：

当在span标签的contenteditable属性为true并当内容发生改变时，才会出现多余的空格问题，使用js获取dom也是可以发现其中空格但是使用正则或splice等方法都无法去除，现有解决方案就是在代码中避免出现换行符和空格(空格也可能会引起此问题)。

如果广大博友知道更好的解决方案的话希望不吝赐教，在此谢过！！！

vue中使用对非表单元素使用contenteditable的问题的更多相关文章

  1. 关于vue2非表单元素使用contenteditable="true"实现textarea高度自适应

    <template> <div ref="sendContent" contenteditable="true" v-html="s ...

  2. vue教程1-01 v-model 一般表单元素(input) 双向数据绑定

    vue教程1-01   v-model 一般表单元素(input) 双向数据绑定el:'#box',//这里放的是选择器.不然会不生效 <!DOCTYPE html> <html l ...

  3. jQuery获取Select选择的Text(非表单元素)和 Value（表单元素）(转)

    jQuery获取Select选择的Text和Value: 语法解释: . $("#select_id").change(function(){//code...}); //为Sel ...

  4. HTML 5中不同的新表单元素类型是什么？

    HTML 5推出了10个重要的新的表单元素: Color. Date Datetime-local Email Time Url Range Telephone Number Search

  5. 怎样在 Vue 中使用 v-model 处理表单?

    主要是通过 v-model 对表单元素做数据的 双向绑定. 用法其实也很简单, 只是因为表单元素有不同类型, 处理方式有些许不同, 这点需要注意. 1. 如果是 输入框 , 可以直接使用 v-mode ...

  6. Html5中input新增的表单元素和属性介绍。

    input标签主要用于Web表单的创建交互,以便接受来自用户的数据. 我们通过更改type属性的值,来实现不同的输入类型.在以前的写法中表单元素必须放在form元素所包含的里面,而在html5中,我们 ...

  7. HTML 中按钮作为form表单元素提交特性两则 --- 参HTML考标准分析

    相同name的submit 类型的input提交行为 描述 这种情况, <input type="submit" name="ACTION" value= ...

  8. Vue 中循环绑定v-module表单

    子组件有一个列表要做输入验证 <template> <div> <el-form :model="value" ref="numberVal ...

  9. js(jquery)解决input元素的blur事件和其他非表单元素的click事件冲突的方法

    HTML结构:很简单,就一个input,一个div,能说明问题就OK了: <input type="text" value="默认值"><br ...

随机推荐

  1. cbv+resful+APIView源码分析

    CBV源码分析 1概念:什么是cbv和fbv 已经什么是API class bass View ---基于类的视图 function bass View ---基于函数的视图 API(Applicat ...

  2. IDEA+DevTools实现热部署功能

      开发IDE: Intellij IDEA 2018.1 SpringBoot:1.5.9.RELEASE 热部署 大家都知道在项目开发过程中,常常会改动页面数据或者修改数据结构,为了显示改动效果, ...

  3. GC: CMS垃圾回收器三（实践）

    jstat -gc -t [pid] 1000 监控日志... ,抽取其中关键记录不一定连续 应用启动时间 2015-06-23 10:22:27 ,换算后,第二条记录时间是2015-06-24 22 ...

  4. jQuery拾忆

    用jQuery操作select元素 http://www.jb51.net/article/23648.htm 表单中如果用disabled属性,则提交时不会提交该数据,尽量使用readonly属性 ...

  5. C# 给图片添加透明的文字、图片水印

    #region 添加水印 /// <summary> /// 添加文字水印 /// </summary> /// <param name="image" ...

  6. linux学习之路(4)

    用户身份与文件权限 通过uid来区分:  管理员 UID 为 0:系统的管理员用户. 系统用户 UID 为 1-999: Linux 系统为了避免因某个服务程序出现漏洞而被黑客提 权至整台服务器,默认 ...

  7. sqlServer2008技术内幕笔记总结（实用的sql方法总结）

    over函数的使用: 1.可以实现基于什么求和,省去group by: select xingming,xingbie,COUNT(*) over() as '总人数' from jbxx_xuesh ...

  8. 以太坊系列之五: p2p的nat模块--以太坊源码学习

    p2p的nat模块 该模块相对比较简单,因为nat的真正实现并不在此模块,主要是使用了第三方的nat-upnp和nat-pmp来实现真正的穿透(端口映射). 对外公布的接口 ```go // An i ...

  9. EF 热加载 Winform/Asp.net

    public partial class Form1 : Form { BackgroundWorker worker = new BackgroundWorker(); xxContext cont ...

  10. linux系统上安装mysql5.6(详细步骤)

    为了学习mycat 尝试在虚拟机上装mysql(看了别人的博客比划着安装),但装了两次都没成功.因此总结了如下步骤 有需要的朋友可以试下(linux需要联网) mysql-5.6.26.tar.gz百 ...