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

2020 年 12 月 29 日
 youla

如题！

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

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

<body>
<style contenteditable style="display: block;">
.test {
color: #f00;
}
</style>
<div class="test">
text
</div>
</body>
youla
2020 年 12 月 29 日
@DOLLOR 对不起，想象力不够丰富，原来是这么个 style~~
aaronlam
2020 年 12 月 29 日
@DOLLOR 这个操作很骚，貌似 <link> 标签也行。。
nortonlai
2020 年 12 月 29 日
大开眼界
TargaryenChen
2020 年 12 月 30 日
一些 web 上的 editor 组件就用的 contenteditable 实现的，例如 quill editor 。
SpencerCoding
2020 年 12 月 30 日
<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