如何实现contenteditable可输入元素的onchange事件

contenteditable 属性是 HTML5 中的新属性,设置属性值为true时可实现将div、p等元素转化为类似input的可输入元素。但是此元素在输入中文时无法正常使用onchange事件实现常规需求,如下提供可替换方案:

假设需求:可编辑输入框中输入值改变即向后台请求,发送数据。

如果是input、textarea元素,此场景可以用onchange事件轻松完成,然而可编辑的div元素利用此onchange或者oninput事件时会出现不符场景的非常规情况(输入中文时,中文未生成,仍在敲击键盘时会触发输入值改变,获取当前敲击的英文字母而发送请求)
eg:https://s31.aconvert.com/convert/p3r68-cdx67/jcx2z-lbens.gif

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,581评论 1 11
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,955评论 1 45
  • 在学习weex的过程中看到了常用标签相关的内容,为了自己以后能够快速查阅特整理出此文档。 a 简介组件定义了指向某...
    TyroneTang阅读 4,785评论 1 3
  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 11,317评论 6 13
  • 原教程内容详见精益 React 学习指南,这只是我在学习过程中的一些阅读笔记,个人觉得该教程讲解深入浅出,比目前大...
    leonaxiong阅读 2,882评论 1 18