HTML标签中有几个标签是能够输入文字的?css
不少人都会回答两个: input,textarea。web
然而,并不仅有两个,div,p还有其余不少标签其实均可以。svg
代码:spa
<div class='input' contenteditable placeholder='请输入文字'></div> /**css样式*/ .input{ width:200px; height:24px; line-height:24px; font-size:14px; padding:5px 8px; border:1px solid #ddd; } .input:empty::before { content: attr(placeholder); } /**css样式*/ .input{ width:200px; height:24px; line-height:24px; font-size:14px; padding:5px 8px; border:1px solid #ddd; } .input:empty::before { content: attr(placeholder); }
效果:
code
解释xml
contentEditable 属性用于设置或返回元素的内容是否可编辑。blog
当咱们在标签里面加入了contentEditable属性,这个标签就会变为可编辑状态。token
扩展图片
切换 get
元素的编辑状态:
var x = document.getElementById("myP"); if (x.contentEditable == "true") { x.contentEditable = "false"; button.innerHTML = "p 元素内容可编辑!"; } else { x.contentEditable = "true"; button.innerHTML = "p 元素内容不可编辑!"; }