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

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. 第01章-Spring之旅

    一.简化Java开发 1. Spring的主要特性 依赖注入DI和面向切面编程AOP. 2. 关键策略 轻量级和最小侵入性编程:POJO 松耦合:DI和AOP 声明式编程:切面和惯例 减少样板式代码: ...

  2. Python Lambda 的简单用法

    下面代码简单举例介绍以下 lambda的用法. from functools import reduce #1 python lambda会创建一个函数对象,但不会把这个函数对象赋给一个标识符,而de ...

  3. poj2299 Ultra-QuickSort(线段树求逆序对)

    Description In this problem, you have to analyze a particular sorting algorithm. The algorithm proce ...

  4. timer实现Grid自动换行(连续相同的id跳到下一行)

    private { Private declarations } FRow: Integer; procedure SetRow(const Value: Integer); public { Pub ...

  5. 国外物联网平台（4）：Ayla Networks

    国外物联网平台(4)——Ayla Networks 马智 定位 Ayla企业软件解决方案为全球部署互联产品提供强大的工具 功能 Ayla的IoT平台包含3个主要组成部分: (1) Ayla嵌入式代理A ...

  6. C# DataGridView控件动态添加新行

    C# DataGridView控件动态添加新行 DataGridView控件在实际应用中非常实用,特别需要表格显示数据时.可以静态绑定数据源,这样就自动为DataGridView控件添加相应的行.假如 ...

  7. 一个数组：1,1,2,3,5,8,13,21...+m，求第30位数是多少？用递归实现；(常考！！！)

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Cons ...

  8. cinder create volume的流程-scheduler调度

    创建 Volume 时,cinder-scheduler 会基于容量.Volume Type 等条件选择出最合适的存储节点,然后让其创建 Volume. 1.cinder-scheduler配置相关项 ...

  9. plantix插件工具，eclipse工具

    代码修改后部署流程: 修改代码-->自动构建工作空间(将修改的代码或配置文件复制到classes文件夹)-->发布到tomcat环境中-->重启服务器运行 常见报错:java.lan ...

  10. April Fools Day Contest 2019 A. Thanos Sort

    A. Thanos Sort time limit per test 1 second memory limit per test 256 megabytes input standard input ...