前端HTML5的新特性

白鸽（二般）

已于 2024-07-30 23:48:23 修改

阅读量410

点赞数 3

文章标签： html5

于 2024-07-29 00:32:43 首次发布

本文链接：https://blog.csdn.net/qq_62079814/article/details/140759125

版权

input新增特性

type为text 表示文本框

  <input type="text" />

type为password 表示密码框

    <input type="password" />

type 为checkbox跟redio时表示多选框和单选框

    <input type="checkbox" />
      <input type="radio" />

以下属性值大部分只有谷歌浏览器支持

当type为data时表示年月日选择器

当type为time为时间选择器

当type为week为周选择器

      <input type="date" />
      <input type="time" />
      <input type="week" />

      <!-- 结和上面的data time week -->
      <input type="datetime-local" />

当type为color时表示颜色选择器

    <input type="color" />

type为email时表示只能输入邮箱文本框

    <input type="email" placeholder="请输入邮箱" />

当type为number时表示只能输入数字的文本框

      <input type="number" />

当type为range表滑块

 <input type="range" id="range" value="0" min="0" max="100" name="range" />

当type为search时表示显示历史数据

      <input type="search" name="search" id="" placeholder="请输入搜索内容" />

当type为url表示只能输入网址的文本框

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

当type表示file时表示选择文件

当type表示submit时表示提交from表单的数据

   <input type=" file" />

contenteditabel属性

当contenteditable为true时可以让文本框与文字来回转换

    <!-- 1.没有浏览器兼容问题 -->
    <!-- contenteditable属性是可以继承的 -->
    <div contenteditable="true">
      pandelete
      <br />
      <!-- contenteditable属性是可以覆盖的 -->
      <span contenteditable="false">pandelete</span>
    </div>
      <span contenteditable="true">pandelete</span>

拖拽属性

draggable

只有谷歌chrome浏览器支持draggable属性跟safari浏览器支持

拖拽的生命周期

1.拖拽开始，

ondragstart：开始事件按下的一瞬间是不会触发事件的，只有当用户开始拖拽时才会触发该事件。

2.拖拽进行中，

ondrag：拖拽过程中事件

3.拖拽结束

ondragend：结束事件松手时触发事件

目标区域

1.鼠标进入

ondragenter：当鼠标完全进入目标区域时触发事件

2.目标区域内移动

ondragover：当拖拽物体在目标区域时触发

3.鼠标离开目标区域

ondragleave ：鼠标离开目标区域时触发

4.释放鼠标时触发

ondrop：当鼠标在目标区域释放鼠标按钮时触发

      const a = document.querySelector(".a");
      let beginX = 0;
      let beginY = 0;
      a.ondragstart = function (event) {
        console.log(event);
        beginX = event.clientX;
        beginY = event.clientY;
        // console.log(beginX, beginY);
      };
      a.ondrag = function (event) {
        // console.log(event)
      };
      console.log(a.offsetLeft);
      a.ondragend = function (event) {
        // console.log(event);

        a.style.left =  event.clientX - beginX + "px";
        a.style.top = a.offsetTop + event.clientY - beginY + "px";
        console.log(a.style.left);
      };

拖拽练习

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .box1 {
        width: 200px;
        height: 200px;
        border: 1px solid #ccc;
        position: absolute;
      }
      li {
        width: 100%;
        height: 30px;
        background-color: #abcdef;
        list-style: none;
        margin: 10px auto 0 auto;
        position: relative;
      }
      .box2 {
        left: 300px;
        position: absolute;
        width: 200px;
        height: auto;
        border: 1px solid skyblue;
        position: absolute;
        padding-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div>
    <div class="box2"></div>
    <script>
      let Dragend;
      const liList = document.getElementsByTagName("li");
      for (let i = 0; i < liList.length; i++) {
        liList[i].setAttribute("draggable", true);
        liList[i].ondragstart = (e) => {
          //   e.dataTransfer.effectAllowed = "link";
          // Dragend = e.target.cloneNode(true);
          Dragend = e.target;
          console.log(e.target);
        };
      }

      const box2 = document.querySelector(".box2");
      box2.addEventListener("dragover", function (e) {
        e.preventDefault();
      });
      box2.ondrop = function (e) {
        console.log(Dragend);
        box2.appendChild(Dragend);
        // Dragend = null;
      };

      const box1 = document.querySelector(".box1");
      box1.addEventListener("dragover", function (e) {
        e.preventDefault();
      });
      box1.ondrop = function (e) {
        e.dataTransfer.dropEffect = "link";
        console.log(Dragend);
        box1.appendChild(Dragend);
        // Dragend = null;
      };
    </script>
  </body>
</html>

拖拽案例