H5属性篇

卷卷小战士

已于 2022-03-03 14:04:02 修改

阅读量405

点赞数 2

分类专栏： HTML5 文章标签： css3 css javascript

于 2022-03-03 14:01:56 首次发布

本文链接：https://blog.csdn.net/weixin_53647158/article/details/123252480

版权

HTML5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这里写目录标题

属性篇

属性篇

placeholder

<input type="text" placeholder="用户名">
<input type="password" placeholder="请输入密码">

Calendar类

date

chrome支持，Safari，IE不支持

<input type="date" name="" id="">

time

chrome支持，Safari，IE不支持

week

chrome支持，Safari，IE不支持

datetime-local

chrome支持，Safari，IE不支持

number

chrome支持，Safari，IE不支持

我们可以发现Calender类的属性都是只有chrome支持。所以这些属性在面试的时候可能会用到，但是在实际开发中不是想用就能用的上的，毕竟兼容性不好。

email

chrome，FireFox支持，Safari，IE不支持

color

chrome支持，Safari，IE不支持

range

chrome，Safari支持，FireFox，IE不支持

search

chrome支持，Safari支持一点，IE不支持

url

chrome，FireFox支持，Safari，IE不支持

contenteditable

没有兼容性问题，这个属性是可以使用的。

<div contenteditable="true">
	一二三
</div>

在这个框里的内容是可以修改的。

再写一个小的Demo：

<div contenteditable="true">
    <span contenteditable="false">姓名：</span>张三<br>
    <span contenteditable="false">性别：</span>男
</div>

这样的话，span标签里的文字是不可以修改的，但是span外的文字依然可以修改。

dragable

chrome，Safari可以正常使用的，Firefox下不好使。

<div draggable="true"></div>

可以实现一个拖拽的效果。

div标签默认是不可以拖拽的，但有些标签是可以的，比如<a>，<img>默认是可以拖拽的，有了拖拽功能的话，就有了拖拽事件，所以这里要说一个概念是生命周期：

从按下开始移动的一瞬间，是拖拽开始，移动过程中是拖拽进行中，松开一瞬间是拖拽结束。

拖拽要有被拖拽到物体和目标区域，这里先说被拖拽的物体和他的生命周期：

注意按下的一瞬间是不会触发生命周期的，开始的是移动的一瞬间，

<div draggable="true" class="a"></div>
    <script>
        var oDragDiv = document.getElementsByClassName("a")[0];
        var beginX = 0;
        var beginY = 0;
        oDragDiv.ondragstart = function (e) {
            beginX = e.clientX;
            beginY = e.clientY;
        }
        oDragDiv.ondragend = function (e) {
            var x = e.clientX - beginX;
            var y = e.clientY - beginY;
            oDragDiv.style.left = oDragDiv.offsetLeft + x + "px";
            oDragDiv.style.top  =oDragDiv.offsetTop + y + "px";
        }
    </script>

这样可以实现一个可以将方块拖拽到任意地方的效果。

然后说目标区域的生命周期：

当鼠标进入目标区域的时候，Drop事件触发，一定要注意不是图形元素进入就触发，而是拖拽的箭头进入才触发。

所有的标签元素，当拖拽周期结束时，默认事件是回到原处。

如果要阻止一个事件的默认事件触发，则要在前一个事件提前阻止。

接下来写一个Demo来更好的理解这个Drop事件：

<div class="box1">
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="box2"></div>

    <script>
        var dragDom;
        var liList = document.getElementsByTagName("li");
        for (var i = 0; i < liList.length; i ++) {
            liList[i].setAttribute("draggable", true);
            liList[i].ondragstart = function (e) {
                dragDom = e.target;
            }
        }

        var box2 = document.getElementsByClassName("box2")[0];
        box2.ondragover = function (e) {
            e.preventDefault();
        }
        box2.ondrop = function (e) {
            box2.appendChild(dragDom);
            dragDom = null;
        }
        var box1 = document.getElementsByClassName("box1")[0];
        box1.ondragover = function (e) {
            e.preventDefault();
        }
        box1.ondrop = function (e) {
            box1.appendChild(dragDom);
            dragDom = null;
        }
    </script>

*{
    margin: 0;
    padding: 0; 
}

.box1{
    width: 150px;
    height: auto;
    position:absolute;
    border: 1px solid;
    padding-bottom: 10px;
}

.box2{
    position: absolute;
    left: 300px;
    width: 100px;
    height: auto;
    border: 1px solid;
    padding-bottom: 10px;

}

li{
    width: 100px;
    height: 30px;
    position: relative;
    background: #abcdef;
    margin: 10px auto 0px auto;
    list-style: none;
}