contenteditable属性让div也可以当做输入框

2024-08-29

contenteditable属性让div也可以当做输入框

你知道div也可以当做输入框么? H5的全局属性contenteditable,带有contenteditable属性的div而不是input或者textarea来作为输入框(div可以根据内容自动调整高度),但是div它是不支持placeholder属性的.那怎么在div内容为空的时候显示一个默认文字呢? 输入框语法 <element contenteditable="true|false"> <div class='input' contenteditable p

使用div 的 contenteditable属性，实现输入编辑，输入 "#" 出现下拉选择

文章原文:https://www.cnblogs.com/yalong/p/11883585.html 演示效果如下: 具体代码可以看 https://github.com/YalongYan/edit-by-contenteditable , 下面分析实现的大概过程代码实现过程 1.把div容器变成可编辑的,用 contenteditable="true" 2.div容器里面的内容都用 v-html 渲染 3.输入 # 出现下拉选择,监听 keyup 事件即可 4.下拉框的位置

html5新特性contenteditable 属性更容易实现动态表单

介绍html5新特性的一个属性:contenteditable 作用域全局.所有的块标签都可以,例如:span.p.div.td等标签.但是,不可以作用域<br/>类型的标签. contenteditable属性的作用是,允许标签获取焦点是可以输入内容.html5之前:如果我们想创建一个表单,且表单的表格可以输入内容的情况.会选择一个js事件当点击td标签是动态生成一个input输入框显示在当前td标签区域上方,输入完成后将值赋给当前td中.然后input消失.拥有html5之后,我们只要在t

html元素contenteditable属性如何定位光标和设置光标

最近在山寨一款网页微信的产品,对于div用contenteditable属性做的编辑框有不少心得,希望可以帮到入坑的同学. 废话不多说了,我们先来理解一下HTML的光标对象是如何工作的,后面我会贴完整的DEMO代码,不用急,先去理解,才能做出更加好的输入体验. 在HTML里面,光标是一个对象,光标对象是只有当你选中某个元素的时候才会出现的. 当我们去点击一个输入框的时候,实际上它会产生一个选中对象-selection(就是我们可以看到的文字变成蓝色的那个区域),selection在火狐浏览器可以

contenteditable 属性

定义和用法 contenteditable 属性规定是否可编辑元素的内容. 语法 <element contenteditable="value"> 属性值值描述 true 规定可以编辑元素内容. false 规定无法编辑元素内容. classname 继承父元素的 contenteditable 属性. 支持IE系列和最新浏览器实例: /**宽度固定,自动换行,内容超出滚动条显示***/ .divOne { width: 300px; height: 200px;

关于contenteditable属性

今天刷刷看看,看到了发说说框,发现居然不是textarea的,百思不得其解围.后来看到contenteditable,心想应该就是这个搞怪的吧,百度了下.w3c的解释是contenteditable属性规定元素内容是否可编辑.里面只有true或者false;默认false,加个true后,div.p.等等非输入标签都是可以输入.而且主流浏览器都是支持,包括IE7

周记5——随机撒花特效、动态修改伪元素样式、contenteditable属性、手机端调试利器VConsole、浏览器端debug调试

记录一些小零碎知识点,以便日后查看~ 1.随机撒花特效教师节快到了,公司的产品提出一个需求:在IM(即时聊天)聊天界面弹出教师节的祝福“广告”,用户点击“发送祝福”按钮,聊天界面会随机撒花.这里的重点是随机撒花,下面会附上随机撒花的代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"

通过设置CSS属性让DIV水平居中

通过设置CSS属性让DIV水平居中 ---------------------- <html> <head> <title></title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta

DIV的Position属性和DIV嵌套DIV

1.前言我们在利用div+css进行布局时,常常被div的位置弄的焦头烂额,很多人甚至放弃了div而直接用table.这里一如既往的推荐使用div布局,其实我们只要掌握了div的position属性和div的float属性,布局是非常灵活的,这里详细说一下div的position,没想象中那么简单,也没想象中那么复杂. 2.position的四种取值 static:static定位就是不定位,出现在哪里就显示在哪里,这是默认取值,只有在你想覆盖以前的定义时才需要显示指定 relative:re

HTML5它contenteditable属性

HTML5它contenteditable属性 1.功能说明 (1)功能:同意用户编辑元素中的内容 (2)说明:是一个布尔值.false是不能编辑,true为可编辑 2.分析实例 (1)contenteditable属性为false <!DOCTYPE html> <head> <meta charset="utf-8" /> <title>contentEditable</title> </head> <u

contenteditable属性让div也可以当做输入框

热门专题