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

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. 一张图看懂ASP.NET MVC5认证和授权过滤器的执行顺序

    IAuthenticationFilter是MVC5中的新特性,它有2个关键方法: OnAuthentication OnAuthenticationChallenge 当IAuthenticatio ...

  2. 操作文件方法简单总结(File,Directory,StreamReader,StreamWrite ) - Zery-zhang

    一 基本介绍 操作文档,文件夹,需要用到的类 1 Directory (静态类) :      用于创建.移动和删除等操作通过 目录 和子 目录 DirectoryInfo (非静态): 2 File ...

  3. MVC 路由调试工具-RouteDebugger

    MVC  路由调试工具-RouteDebugger 方案一: 在程序包控制台中执行命令 PM> Install-Package routedebugger 自动会在你的项目webconfig中& ...

  4. Oracle大字段（clob）模糊查询优化方法

    对于内容很多的时候clob打字段模糊查询很慢,整理一个小方法: 1,在查询的列上建索引 2,对于要查询的clob字段使用一下语句创建索引   CREATE INDEX idx_zs_info_note ...

  5. ES更改参数max_result_window

    今天开发那边说翻页超过10000报错.早上来查阅官网手册,说from/size默认是10000.通过参数index.max_result_window进行控制.那么直接改这个参数即可. 1.先看看默认 ...

  6. kali linux之netcat

    网络工具中的瑞士军刀----体积小,功能强大 侦听模式/传输模式 telnet/获取banner信息 传输文本信息,文件,目录 加密传输文件,远程控制/木马,加密所有流量(来做远程控制是非常理想的选择 ...

  7. 加密模块（md5）

    一.md5加密 import hashlib s = ' print(s.encode()) m = hashlib.md5(s.encode())# 必须得传一个bytes类型的 print(m.h ...

  8. 4.SVM

  9. 命令行里打 cd 简直是浪费生命

    简评:作为工程师,你在命令行下最常打的命令无非就是 cd 与 ls.这些年你浪费了多少时间? 作为一个程序员或者在 shell 中花费大量时间的人,你可能会经常以一种低效率的方式在目录中来回移动,特别 ...

  10. SpringMVC配置文件dispatcherServlet-servlet.xml

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...