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

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. bootstrap实现菜单定位

    <!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8&quo ...

  2. 基本滤波算法比较 （转载http://blog.sina.com.cn/s/blog_69f2aa5a01014du5.html）

    最近在做关于数据采集方面的东西,这就不免涉及到了滤波的算法,在网上找到了关于几种算法的比较. 数字滤波方法有很多种,每种方法有其不同的特点和使用范围.从大的范围可分为3类. 1.克服大脉冲干扰的数字滤 ...

  3. UVa 1625 Color Length (DP)

    题意:给定两个序列,让你组成一个新的序列,让两个相同字符的位置最大差之和最小.组成方式只能从一个序列前部拿出一个字符放到新序列中. 析:这个题状态表示和转移很容易想到,主要是在处理上面,dp[i][j ...

  4. URAL 1141. RSA Attack（欧拉定理+扩展欧几里得+快速幂模）

    题目链接 题意 : 给你n,e,c,并且知道me ≡ c (mod n),而且n = p*q,pq都为素数. 思路 : 这道题的确与题目名字很相符,是个RSA算法,目前地球上最重要的加密算法.RSA算 ...

  5. netty使用以及聊天小程序

    <从零开始搭建游戏服务器>Netty导入创建Socket服务器 Netty入门教程 Netty 聊天小程序

  6. Deferred Shading,延迟渲染（提高渲染效率，减少多余光照计算）【转】

    Deferred Shading,看过<Gems2> 的应该都了解了.最近很火的星际2就是使用了Deferred Shading. 原帖位置:   http://blog.csdn.net ...

  7. 趣图：IT公司员工出游真实写照

      程序员调 Bug 的写照 趣图:如何辨别程序员设计师的水平

  8. 洛谷P3355 骑士共存问题（最小割）

    传送门 de了两个小时的bug愣是没发现错在哪里……没办法只好重打了一遍竟然1A……我有点想从这里跳下去了…… 和方格取数问题差不多,把格子按行数和列数之和的奇偶性分为黑的和白的,可以发现某种颜色一定 ...

  9. requests模块处理cookie,代理ip，基于线程池数据爬取

    引入 有些时候,我们在使用爬虫程序去爬取一些用户相关信息的数据(爬取张三“人人网”个人主页数据)时,如果使用之前requests模块常规操作时,往往达不到我们想要的目的. 一.基于requests模块 ...

  10. 在FC中如何获取fcdot文件

    在FlexiCapture中一些客户在问如何获取.fcdot文件(在测试序列号下或者没有测试模板的情况下) 第一步: 1.查看License Manager查看是否找到序列号 首先我们在开始菜单里面打 ...