问 AI 一个 contenteditable 的问题半天没答案

问题

当你有一个 contentEditabletrue 的元素,在按顺序点击 Enter 时,获取到的 innerText 是正常的:

html 复制代码
<div class="code-editor" contenteditable="true" data-placeholder="Start typing your code here...">
	1
	<div>2</div>
	<div>3</div>
</div>

上面的 innerText'1\n2\n3'

但是!当你输入 1、Enter、2,然后按方向键↑,然后再输入 Enter,元素则会变成这样:

html 复制代码
<div class="code-editor" contenteditable="true" data-placeholder="Start typing your code here...">
	1
	<div>
		<br />
		<div>2</div>
	</div>
</div>

根据肉眼观察,你得到的应该是 '1\n\n2',但是实际上,通过 innerText 得到的是 '1\n\n\n2'。(顺带一提,当你在这个元素里面全选复制,拿到的是正常的 '1\n\n2'

我拿着这问题问了两个 AI,结果都在胡扯。首先它们就猜不对第二段 HTML 输出的 innerText,它们的答案都是很符合直觉的 '1\n\n2'。其实这个时候就已经凉了一大半了,接着我强行告诉它第二个结构的输出,问这种情况怎么获得正常的 \n,结果教我用正则去除重复两次以上的 \n,但实际上用户就是有可能多次 Enter,显然无效。

在习惯了 AI 时代的我最后才想起返璞归真,去 stackoverflow 上找答案,结果是,十分高效,立刻就找到了。

解 1

ts 复制代码
contentEditable = "plaintext-only";

暴力 plaintext-only,设置之后修改内容只会插入 <br>,不会插入 <div>。缺点自然是如果你在粘贴富文本时会强制转为纯文本。

解 2

contenteditable 添加 display:inline-block;。可以说正常来说你根本想不到,也很难找到资料推理出向 contenteditable 添加 display:inline-block; 就能做到让用户输入不再插入 <div>

解 3

ts 复制代码
document.addEventListener("keydown", (event) => {
	if (event.key === "Enter") {
		document.execCommand("insertLineBreak");
		event.preventDefault();
	}
});

在用户 Enter 时直接 preventDefault,用 execCommand 手动帮用户插入 \n。这个方法倒是"可以想象",execCommand 确实是一个神奇的函数,只可惜我还没了解它,它就已经处于弃用状态,也不知道有什么替代方案。

结语

关键时刻,还得是 stackoverflow,AI 问半天都是错的,太偏门的问题 AI 只会给你幻觉,歇歇吧。不要小看在 stackoverflow 积累的真正的人的智能 😏

顺便这个问题是在实现 AI 提醒的时候遇到的,顺道还遇到了些 CSS 问题,例如两个叠在一起元素明明行高是一样的,但是用 \n 换行的那个元素偏偏总比 contentEditable 的元素高一点,问 AI 同样没结果,最后乱搞 CSS 碰巧解决了......JavaScript 是挺简单的,但是 CSS 和浏览器接口,真的好难啊!

参考

相关推荐
安全系统学习7 分钟前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖23 分钟前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖34 分钟前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水1 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐1 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06271 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台1 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121381 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴2 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
AntBlack2 小时前
拖了五个月 ,不当韭菜体验版算是正式发布了
前端·后端·python