一个奇怪的需求，前端不用“input or textarea”，实现输入框的功能，你会怎么做？

2020-12-29 21:29:39 +08:00
 youla

如题！

是我落后了，原来这样也行~~

<div class="content" contenteditable="true"></div>
2838 次点击
所在节点    程序员
16 条回复
ysc3839
2020-12-29 21:33:00 +08:00
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable
heroes3top
2020-12-29 21:33:31 +08:00
中文输入有其他唤起输入法的控件吗 = =
shintendo
2020-12-29 21:39:06 +08:00
各种富文本编辑器控件都是用这个做的
CismonX
2020-12-29 21:39:15 +08:00
我第一反应是用 canvas 😐
JinTianYi456
2020-12-29 21:40:04 +08:00
我上个月知道吧 [doge]
westoy
2020-12-29 21:50:14 +08:00
wysiwyg 编辑器都是基于这个的
DOLLOR
2020-12-29 21:50:50 +08:00
contenteditable="true"
富文本编辑都是用这个实现的。
你甚至可以把它加载 style 标签上。
autoxbc
2020-12-29 22:03:04 +08:00
原生控件有 onchange 和 oninput 事件，自己搞的就没了
youla
2020-12-29 22:03:57 +08:00
@DOLLOR，写 style 不行啊，大屁眼子！！
youla
2020-12-29 22:08:15 +08:00
@autoxbc 用 contenteditable="true"属性还是有的
DOLLOR
2020-12-29 22:11:11 +08:00
@youla

<body>
<style contenteditable style="display: block;">
.test {
color: #f00;
}
</style>
<div class="test">
text
</div>
</body>
youla
2020-12-29 22:13:45 +08:00
@DOLLOR 对不起，想象力不够丰富，原来是这么个 style~~
aaronlam
2020-12-29 22:33:44 +08:00
@DOLLOR 这个操作很骚，貌似 <link> 标签也行。。
nortonlai
2020-12-29 23:25:25 +08:00
大开眼界
TargaryenChen
2020-12-30 09:04:38 +08:00
一些 web 上的 editor 组件就用的 contenteditable 实现的，例如 quill editor 。
SpencerCoding
2020-12-30 09:12:19 +08:00
<div contenteditable="true">I'm Editable. Edit me!</div>

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/740127

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX