HTML5：让div也能接受文本输入
HTML5有一个枚举属性，contenteditable，允许非文本类元素也可以被编辑。<p></p><div><br></div><div>contenteditable是一个组合词，content，指内容，editable，是可编辑的之意，合起来意为可编辑内容。h5中，如果给元素加入这一属性并设置其值为 true，则该元素在dom中就可以输入文本甚至粘贴图片。例如，一个 div：</div><div><br></div><div><div <font color="#ff0000">contenteditable="true"</font> style="margin: 10px auto; width: 400px; height: 200px; border: 1px solid; padding: 10px;"></div></div><div><br></div><div contenteditable="true" style="margin: 10px auto; width: 400px; height: 200px; border: 1px solid; padding: 10px;"><br></div><div><br></div>单击上面的div，会出现输入光标，可以输入文字，也可以将复制的图片粘贴到其内。促使 div 元素具备能接收用户输入的关键就是上面代码示例中红色的部分，一切仰仗于 true 的 contenteditable 属性。<div><br></div><div>除了 div，其他原本不能接收输入的元素，如 span 等，通过相同的设置，效果也会一样。</div><div><br></div><div>至于如何处理用户的输入，这需要JS来处理交互工作，而要保存用户输入的数据，则需要 php 或 asp 或 jsp 或 Python 等后端开发语言和相关权限来加以实现。</div> 一楼中，可以试着将我的头像拖动到 div 中来。
这是富文本框，如果粘贴彩色文本，它一样可以还原 当然，一楼仅仅是为了展示一下 div 可以被编辑，并没有对该 div 进行其他相关设定，比如还没有自动滚动条，过多的文本会溢出……所有这些，都要进行处理 当元素设置了 contenteditable="true" 属性，它就是一个文本框，但又比文本框厉害——它是一个富文本框。 这个有意思，又是个可以互动的。只是输入的没法保存，一刷新就没了{:4_173:} 看到可以直接在页面上黑黑的帖子里输入文字和拉入图片，感觉很神奇{:4_187:} 好玩。在玩中学习真好。 加林森 发表于 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
保存需要权限和相应的语言支持
嗯嗯，就这样输入一下玩玩也挺有趣{:4_173:} 马黑黑 发表于 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只能显 ...
但是，所见即所得却是不能存啊。
页:
[1]
2