一、input新增属性
1. placeholder
2. Calender类
input type=’date’
input type=’time’
input type=’week’
input type=’datetime-local’
只有chrome支持，所以不常用
3. Number
input type=’number’只有chorme支持，该输入框只能输入数字
4. Email
input type=’email’ 只有chrome和火狐支持，safari，IE不支持
5. color
inputtype=’color’颜色选择器，chrome支持，safari、ie不支持
6. range
input type=’range’ 一个进度条，拖拽选值，chrome、safari支持，火狐、IE不支持
7. search
input type=’search’填写的时候自动给一个提示，chrome支持，safari支持不完全，IE、火狐不支持
8. url
input type=’url’只能输入完整的网址。chrome，火狐支持
二、contenteditable属性
- 该属性可以让我们在页面上直接修改div里的文字，可以编辑元素内部的内容，每次点击该元素，会变成一个输入框可以进行编辑
- 最好不要嵌套使用，进行编辑的时候，可编辑内容除了文字等，还包括标签内部的子元素
- 继承性：可继承，可覆盖
- 默认值：默认为false
-
三、dragable属性
给元素设置该属性，元素设置为可拖拽移动，
- 默认值：默认false，但是有特殊元素默认为true：a标签、img标签
- 拖拽的生命周期：从鼠标移到元素上点击到鼠标松开的过程
拖拽开始 ondragstart事件（按下不会立即触发，要稍微拖拽一点点）、拖拽进行中 ondrag移动事件、拖拽结束ondragend事件
- 拖拽的组成：被拖拽的元素、目标位置（目标元素）
- ondragenter拖拽进入到目标位置的事件
ondragenter触发的条件是拖拽的鼠标移入才会触发，而不是元素一进入就触发
- ondragover鼠标一移入就会触发，记录每像素的位置
- ondragleave离开区域的事件
- ondrap：拖拽松手的瞬间发生的事件
所有的元素拖拽结束后，默认回到原位置
在dragleaveover的事件里添加默认阻止事件，才会有效果
若有收获，就点个赞吧
0 人点赞
