HTML5：让div也能接受文本输入

马黑黑

HTML5有一个枚举属性，contenteditable，允许非文本类元素也可以被编辑。

contenteditable是一个组合词，content，指内容，editable，是可编辑的之意，合起来意为可编辑内容。h5中，如果给元素加入这一属性并设置其值为 true，则该元素在dom中就可以输入文本甚至粘贴图片。例如，一个 div：

<div contenteditable="true" style="margin: 10px auto; width: 400px; height: 200px; border: 1px solid; padding: 10px;"></div>

单击上面的div，会出现输入光标，可以输入文字，也可以将复制的图片粘贴到其内。促使 div 元素具备能接收用户输入的关键就是上面代码示例中红色的部分，一切仰仗于 true 的 contenteditable 属性。

除了 div，其他原本不能接收输入的元素，如 span 等，通过相同的设置，效果也会一样。

至于如何处理用户的输入，这需要JS来处理交互工作，而要保存用户输入的数据，则需要 php 或 asp 或 jsp 或 Python 等后端开发语言和相关权限来加以实现。

马黑黑

一楼中，可以试着将我的头像拖动到 div 中来。

这是富文本框，如果粘贴彩色文本，它一样可以还原

马黑黑

当然，一楼仅仅是为了展示一下 div 可以被编辑，并没有对该 div 进行其他相关设定，比如还没有自动滚动条，过多的文本会溢出……所有这些，都要进行处理

马黑黑

当元素设置了 contenteditable="true" 属性，它就是一个文本框，但又比文本框厉害——它是一个富文本框。

红影

这个有意思，又是个可以互动的。只是输入的没法保存，一刷新就没了

红影

看到可以直接在页面上黑黑的帖子里输入文字和拉入图片，感觉很神奇

加林森

好玩。在玩中学习真好。

马黑黑

加林森 发表于 2022-6-17 15:50
好玩。在玩中学习真好。

是不错的

马黑黑

红影 发表于 2022-6-17 14:33
这个有意思，又是个可以互动的。只是输入的没法保存，一刷新就没了

保存需要权限和相应的语言支持

马黑黑

红影 发表于 2022-6-17 14:34
看到可以直接在页面上黑黑的帖子里输入文字和拉入图片，感觉很神奇

这是h5正常的功能。过去，这个属性没有引入之前，是需要jQuery这类框架来实现的

加林森

马黑黑 发表于 2022-6-17 19:09
是不错的

嗯嗯。明白的。

红影

马黑黑 发表于 2022-6-17 19:10
保存需要权限和相应的语言支持

嗯嗯，就这样输入一下玩玩也挺有趣

红影

马黑黑 发表于 2022-6-17 19:11
这是h5正常的功能。过去，这个属性没有引入之前，是需要jQuery这类框架来实现的

嗯，现在这个非常简便。

马黑黑

红影 发表于 2022-6-17 22:06
嗯嗯，就这样输入一下玩玩也挺有趣

挺好的，如果深开发

马黑黑

红影 发表于 2022-6-17 22:06
嗯，现在这个非常简便。

非常不错的

红影

马黑黑 发表于 2022-6-17 22:06
挺好的，如果深开发

没想出来它能派什么用途。

红影

马黑黑 发表于 2022-6-17 22:07
非常不错的

简单高效。

马黑黑

红影 发表于 2022-6-18 07:39
简单高效。

这是h5新特性

马黑黑

红影 发表于 2022-6-18 07:38
没想出来它能派什么用途。

像发帖时文字能使用不同的颜色，能加入图片、音频、视频，都是所见即所得的样纸，它能做，textarea只能显示文本代码

红影

马黑黑 发表于 2022-6-18 09:20
像发帖时文字能使用不同的颜色，能加入图片、音频、视频，都是所见即所得的样纸，它能做，textarea只能显 ...

但是，所见即所得却是不能存啊。