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

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. 使用Sqlserver事务发布实现数据同步(转)

    出处:http://www.cnblogs.com/daizhj/archive/2009/11/18/1605293.html 事务的功能在sqlserver中由来已久,因为最近在做一个数据同步方案 ...

  2. Appium移动端自动化测试之元素定位(三)

    1.name定位 driver.find_element_by_id(') driver.find_element_by_id(') driver.find_element_by_name('登录') ...

  3. 20145218PC平台逆向破解

    20145218PC平台逆向破解 实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. 该程序同 ...

  4. Django-项目上线后，静态文件配置失效以及404、500页面的全局配置

    https://blog.csdn.net/Jamin2018/article/details/79060509 https://www.cnblogs.com/lfoder/p/6013142.ht ...

  5. C#中的Linq使用

    First()与FirstOrDefault() 如何结合Expression 如何拼接以避免复杂的switch语句

  6. C# 抽象（3）

    接上章: 抽象类中有抽象方法,那么可不可以有非抽象方法呢? 答案是可以的. abstract class Human { public abstract void Think(); public ab ...

  7. F - ACboy needs your help again! （模拟）

    ACboy was kidnapped!! he miss his mother very much and is very scare now.You can't image how dark th ...

  8. python-列表增删改查、排序、两个list合并、多维数组等

    一.list列表 数组 列表类型:list 下标从0开始,0,1,2... 二.列表增加元素 stus.append() 在列表末尾增加一个元素: stus.insert(,)  在指定位置添加一个元 ...

  9. 类4(可变数据成员/基于const的重载)

    可变数据成员: 有时我们希望能修改某个类的数据成员,即使是在一个 const 成员函数内.可以通过在变量的声明中加入 mutable 关键字来声明一个可变数据成员.mutable 是为突破 const ...

  10. 【spring boot】FilterRegistrationBean介绍

    前言 以往的javaee配置过滤器是在web.xml中配置的,如下代码 <filter> <filter-name>TestFilter</filter-name> ...