控制粘贴paste事件的JS控制法

作者 : 开心源码 本文共1858个字,预计阅读时间需要5分钟 发布时间: 2022-05-12 共163人阅读

很多年以前,稍等,让我 搜一下contenteditable (右上角),哈,是2010年的时候,写了篇文章“ div模拟textarea文本域轻松实现高度自适应 ”,就是说的 contenteditable 的应使用。

尽管说,利使用全浏览器都支持的 contenteditable 模拟文本域可以实现体验相当不错的高度跟随内容自动撑开的效果,但是呢,有个很大的问题就是HTML内容可以直接被粘贴进去,如下图所示:

之前的文章提到过过滤HTML的方法,保证内容都是纯文本。然而,这种方法的问题在于:

粘贴完毕到过滤结束有时间差,使用户很看到内容一闪而过的糟糕体验;

光标的位置会发生变化,不是之前focus的位置了;

当年的我图样图森破,所以,只有上面这种程度。实际上,控制 contenteditable 元素只能输入纯文本是有体验比较好的方法的。

二、与contenteditable属性无关的CSS控制法

一个div元素,要让其可编辑,也就是可读写, contenteditable 属性是最常使用方法,做前台的基本上都知道。但是,知道CSS中有属性可以让普通元素可读写的的同学怕是就少多了。

主角亮相: user-modify .

支持属性值如下:

user-modify: read-only;

user-modify: read-write;

user-modify: write-only;

user-modify: read-write-plaintext-only;

其中, write-only 不使用在意,当下这个年代,基本上没有浏览器支持,以后预计也不会有。 read-only表示只读,就是普通元素的默认状态啦。而后, read-write 和 read-write-plaintext-only 会让元素体现得像个文本域一样,可以 focus 以及输入内容。

您可以狠狠地点击这里: CSS user-modify属性行为体现demo

会发现,设置了 read-write 和 read-write-plaintext-only 值的两个

标签元素是可以被focus的:

而这两者的区别就在于,一个可以输入富文本,而下面一个只能输入纯文本,例如,我们从某网页同时复制一段内容粘贴进去看看:

好了,至此,本文标题的答案实际上就已经有了。也就是给元素设置:

user-modify: read-write-plaintext-only

即可以让元素既可以编辑,也只能输入纯文本,体现得就跟 textarea 文本域一样。

是不是很酷啊!然而,抱歉地跟大家讲下,目前只有webkit内核浏览器才支持read-write-plaintext-only 这个值,因而,我们的用其实是:

-webkit-user-modify: read-write-plaintext-only

我们可以在手机端用,以及,只要要兼顾webkit内容的桌面网页项目。

三、用标准contenteditable属性值的HTML控制法

咳咳,提问:在HTML中, contenteditable 支持的属性值是?

图样图森破时候的我,脑中就只有 contenteditable=”true” 和 contenteditable=”false” ,科科,后来我发现自己太天真了, 新的草案 中明确表示还有多个其余属性值:

The contenteditable attribute is an enumerated attribute whose keywords are the empty string (“”), “events”, “caret”, “typing”, “plaintext-only”, “true”, and “false”. There is one additional state, the inherit state, which is the missing value default (and the invalid value default).

垂直展现下就是(不包括默认的inherit继承):

contenteditable=””

contenteditable=”events”

contenteditable=”caret”

contenteditable=”plaintext-only”

contenteditable=”true”

contenteditable=”false”

别问我,我也不知道 “events” 和 “caret” 是干什么使用的,嘿,但是 “plaintext-only” 我是知道的,可以让编辑区域只能键入纯文本。这里就不需要demo了,直接下面的框框,大家可以试试,看看能不能搞富文本。

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 控制粘贴paste事件的JS控制法

发表回复