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

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. WCF把书读薄（3）——数据契约、消息契约与错误契约

    上一篇:WCF把书读薄(2)——消息交换.服务实例.会话与并发 十二.数据契约 在实际应用当中数据不可能仅仅是以int Add(int num1, int num2)这种简单的几个int的方式进行传输 ...

  2. Python基础入门-os模块

    今天我们来介绍一下os模块中常用的一些方法,当然python中的os模块中提供的使用方法有很多,但是这里面小编会列举出来一些和实际工作中应用的相关的方法,而且会有一些实际的例子方便大家对os模块理解. ...

  3. Cloud Design Patterns: Prescriptive Architecture Guidance for Cloud Applications

    January 2014 Containing twenty-four design patterns and ten related guidance topics, this guide arti ...

  4. 全排列——DFS实现

    原创 之间就写过一篇全排列的博客:https://www.cnblogs.com/chiweiming/p/8727164.html 详细介绍请回看,用的方法(暂且就叫)是“交换法”,其实思路就是DF ...

  5. LeftStr函数使用

    LeftStr(s, i); 表示返回字符串s的左边共I位字符的一个新字符串. var i: integer; s: string; result: string; begin i := ; s := ...

  6. 微服务linux启动停止脚本

    # 停止脚本#!/bin/bash #其他服务停止脚步可以通过修改APP_MAIN参数即可 APP_MAIN=com.idoipo.infras.eureka.center.Application t ...

  7. python 日志模块工具类

    #!/usr/bin/env python # -*- coding: utf-8 -*- import logging # logName 日志中的某个格式化的字段名,logFile生成的日志文件名 ...

  8. c# 两个字符串，s="aeiou",s2="welcome to Quantum Asia"

    c#  两个字符串,s="aeiou",s2="welcome to Quantum Asia" 方案一: 使用while循环: static void Mai ...

  9. 第五篇 Python内置函数

    内置函数 abs() delattr() hash() memoryview() set() all()    dict()  help() min() setattr() any()  dir()  ...

  10. Jmeter_使用IE代理录制脚本

    因为项目登录的密码需要RSA加密,选用了jmeter作为压测工具: 就自己本次项目,顺便学习Jmeter,做一个简单的记录,本文主要介绍使用IE代理录制脚本: 自己也尝试过使用Badboy录制,还是喜 ...