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

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. MATLAB读取写入文本数据最佳方法 | Best Method for Loading & Saving Text Data Using MATLAB

    MATLAB读取文件有很多方法.然而笔者在过去进行数据处理中,由于函数太多,相互混杂,与C#,Python等语言相比,反而认为读取文本数据比较麻烦.C#和Python等高级语言中,对于大部分的文本数据 ...

  2. Git教程--廖雪峰

    Git简介 1.Git是目前世界上最先进的分布式版本控制系统(没有之一) 2.集中式和分布式版本控制系统有什么区别呢?      区别在于历史版本维护的位置:Git本地仓库包含代码库还有历史库,在本地 ...

  3. Head First HTML与CSS、XHTML (中文版).(Elisabeth Freeman) PDF扫描版​

    面对那些晦涩的html书你不禁要问:“难道要成为专家之后才能读懂这些?”那么,你应该选择<head first html与css.xhtml(中文版)>真正来学习html.这本书对你来说, ...

  4. 构建空Datatable

    方法一 DT = new DataTable(); DataRow DR = DT.NewRow(); //构建列(名称,数据类型) DT.Columns.Add("代码", Ty ...

  5. raiden_graph

    使用mermaid描述 raiden 通道 AB,正常状态 graph LR A-- 60,100,S_100 ---B 通道 AB closed graph LR A((A)) -. 60,100 ...

  6. go-spew golang最强大的调试助手,没有之一

    go内置的fmt.sprintf已经很强大了,但是和spew比起来还是相形见绌,这里来一个例子. import ( "fmt" "github.com/davecgh/g ...

  7. ecliplse启动慢的优化方法（亲测有效）

    本人使用的ecliplse IDE 版本是: Version: Photon Release (4.8.0)Build id: 20180619-1200 我的电脑配置是 Ecliplse启动差不多一 ...

  8. 《C#多线程编程实战》2.5 AutoResetEvent

    这个有点像是缩小版的mutex 还是很好理解的 相对mutex 使用的范围可能比较小一点. class Program { static AutoResetEvent work = new AutoR ...

  9. 安卓手机传递文件到Windows系统电脑

    1.需求说明 安卓手机传递文件到Windows系统电脑上不太方便,传递文件的原理花样太多.这里介绍纯净原生的蓝牙文件传递方式. 2.操作步骤 2.1 打开侧边栏面板 2.2 打开蓝牙,右键转至设置 2 ...

  10. Educational Codeforces Round 61 (Rated for Div. 2) G(线段树，单调栈)

    #include<bits/stdc++.h>using namespace std;int st[1000007];int top;int s[1000007],t[1000007];i ...