表单

新增表单控件

  1. 表单控件
    控件名称 含义
    type:datetime 显示完整日期
    type:datetime-local 显示完整日期，不含时区
    type:time 显示时间，不含时区
    type:date 显示日期
    type:week 显示周
    type:month 显示月
    type:search 搜索类型，有清空文本的按钮
    type:range 特定范围内的数值选择器，属性：min、max、step
    type:number 只能包含数字的输入框
    type:color 颜色选择器
    type:email email 地址类型，当格式不符合 email 格式时，提交是不会成功的，会出现提示 “只有当格式相符时，提交才会通过”，
    在移动端获焦的时候会切换到英文键盘
    type:tel 电话类型，在移动端获焦的时候会切换到数字键盘
    type:url url 类型，当格式不符合 url 格式时，提交是不会成功的，会出现提示 “只有当格式相符时，提交才会通过”
  2. 示例代码
    <form>
  <p>
    <span>datetime-local</span>
    <input type="datetime-local" />
  </p>
  <p>
    <span>date</span>
    <input type="date" />
  </p>
  <p>
    <span>time</span>
    <input type="time" />
  </p>
  <p>
    <span>week</span>
    <input type="week" />
  </p>

  <p>
    <span>number</span>
    <input type="number" /><!-- chrome支持，Safari，IB不支持 -->
  </p>
  <p>
    <span>email</span>
    <input type="email" />
  </p>
  <p>
    <span>color</span>
    <input type="color" />
  </p>
  <p>
    <span>range</span>
    <input type="range" min="1" max="100" name="range" /><!-- chrome, Safaris -->
  </p>
  <p>
    <span>search</span>
    <input type="search" name="search" /><!-- chrome支持，Safari支持一点，IE 不支持 -->
  </p>
  <p>
    <span>url</span>
    <input type="url" />
  </p>
  <p>
    <span>submit</span>
    <input type="submit" />
  </p>
</form>
  3. 效果展示

新增表单属性

  1. 表单属性

    表单属性名称 含义
    placeholder 输入框提示信息，适用于 type 为 text、search、url、tel、email、password 类型的 input
    autofocus 指定表单获取输入焦点
    required 此项必填，不能为空
    pattern 正则验证 pattern=“\d{1,5}”
    form 中 action 在 submit 里定义提交地址
    list 和 datalist 为输入框构造一个选择列表，list 值为 datalist 标签的 id

  2. 示例代码

    <form>
  <p>
    <span>placeholder</span>
    <input type="url" placeholder="请输入 url" />
  </p>
  <p>
    <span>autofocus</span>
    <input type="url" autofocus />
  </p>
  <p>
    <span>pattern</span>
    <input type="text" pattern="\d{1,5}" />
  </p>
  <p>
    <span>required</span>
    <input type="url" required />
  </p>
  <p>
    <span>list、datalist</span>
    <input name="email" type="email" list="emaillist" />
    <datalist id="emaillist">
      <option value="test1@test.com">test1@test.com</option>
      <option value="test2@test.com">test2@test.com</option>
    </datalist>
  </p>
  <p>
    <span>submit</span>
    <input type="submit" />
  </p>
</form>

  3. 效果展示

表单验证反馈

  1. 表单验证

    表单验证 含义
    valueMissing 输入值为空时返回 true
    typeMismatch 控件值与预期类型不匹配返回 true
    patternMismatch 输入值不满足 pattern 正则返回 true
    tooLong 超过 maxLength 最大限制返回 true
    rangeUnderflow 验证的 range 最小值返回 true
    rangeOverflow 验证的 range 最大值返回 true
    stepMismatch 验证 range 的当前值是否符合 min、max 及 step 的规则返回 true
    customError 不符合自定义验证返回 true

  2. 示例代码

    <body>
  <form>
    <p>
      <span>email</span>
      <input type="email" value="sb" />
    </p>
    <p>
      <span>submit</span>
      <input type="submit" value="提交" />
    </p>
  </form>
  <section>
    <p>展示 validity 对象 <strong>ValidityState</strong></p>
    <section id="content"></section>
  </section>

  <script type="text/javascript">
    window.onload = function() {
      var inputEl = document.querySelector("input");
      var content = document.querySelector("#content");

      inputEl.addEventListener("invalid", function() {
        // this.validity 不可枚举，改用此方法
        const validityState = {
          valueMissing: this.validity.valueMissing,
          typeMismatch: this.validity.typeMismatch,
          patternMismatch: this.validity.patternMismatch,
          tooLong: this.validity.tooLong,
          tooShort: this.validity.tooShort,
          rangeUnderflow: this.validity.rangeUnderflow,
          rangeOverflow: this.validity.rangeOverflow,
          stepMismatch: this.validity.stepMismatch,
          customError: this.validity.customError,
          valid: this.validity.valid
        };
        content.innerHTML = Object.entries(validityState).map(([k, v]) => `<p><span>${k}:</span><span>${v}</span></p>`).flat(Infinity).join('');

        if (inputEl.value === 'sb')
          inputEl.setCustomValidity('请不要输入敏感词！');
        else
          inputEl.setCustomValidity('');
      })
    }
  </script>
</body>

  3. 效果展示

关闭验证

在 form 标签上加 novalidate 属性，可以禁用 h5 默认的表单验证效果

拖拽

元素拖动

  1. HTML5 已经完全支持鼠标拖动元素，其中图片和链接默认就支持拖拽，而其他的元素需要设置属性 draggable=“true” 就可支持拖拽；其中在拖拽的过程中会默认触发一系列事件；

  2. draggable 全局拖拽属性，规定元素是否可拖动；

    1. true：规定元素的可拖动的；
    2. false：规定元素不可拖动；
    3. auto：使用浏览器的默认行为；

Dom 事件

事件 应用元素 描述
ondragstart 当前被拖拽元素 用户开始拖动元素时触发
ondrag 当前被拖拽元素 元素正在拖动时触发（整个过程持续触发）
ondragend 当前被拖拽元素 用户完成元素拖动后触发
ondragleave 当前被拖拽元素 当鼠标离开拖拽元素时调用
ondragenter 目标元素 当鼠标拖拽元素进入时调用
ondragover 目标元素 当停留在目标元素上时调用（持续触发）
ondrop 目标元素 当在目标元素上松开鼠标时调用
ondragleave 目标元素 当鼠标离开目标元素时调用

目标元素 ondrop 不生效

  1. 问题：ondrop 事件始终不触发，原因是 ondragover 事件是 被拖拽元素 在 目标元素上 拖拽过程中由目标元素触发，ondrop 事件是 被拖拽元素 在 目标元素 上面 drop 的时候由目标元素触发；

  2. 解决：取消掉 ondragover 它的默认事件 e.preventDefault() 才可以正确触发；

案例一 拖拽到其他容器

  1. 示例代码

    <body>
  <div class="continer">
    <div id="box1" class="box">
      <ul style="padding: 0;">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </div>
    <div id="box2" class="box"></div>
  </div>
</body>

    let dragDom;
let box1 = document.getElementById('box1');
let box2 = document.getElementById('box2');
let liList = document.getElementsByTagName('li');

Array.from(liList).forEach((el, inx) => {
    el.setAttribute('draggable', true);
    el.ondragstart = function (e) {
        dragDom = e.target;
    }
});


box1.ondragover = function (e) {
    e.preventDefault();
}
box1.ondrop = function (e) {
    box1.appendChild(dragDom);
    dragDom = null;
}


box2.ondragover = function (e) {
    e.preventDefault();
}
box2.ondrop = function (e) {
    box2.appendChild(dragDom);
    dragDom = null;
}

    .continer {
    display: flex;
}

.box {
    width: 300px;
    border: 1px solid #eee;
    padding-bottom: 10px;
    padding: 10px;
    margin: 10px;
    box-sizing: border-box;
}

.box li {
    position: relative;
    width: 100%;
    height: 30px;
    background: aquamarine;
    margin: 10px auto 0;
    list-style: none;
    text-align: center;
    line-height: 30px;
}

  2. 效果展示

案例二 图片拖拽上传

  1. 示例代码

    <div id="app">
  <div class="upload" draggable="true">
    <div>将图片拖到此处进行上传</div>
  </div>
  <div class="images"></div>
</div>

    const upload = document.querySelector('.upload');
const imageContainer = document.querySelector('.images');

upload.addEventListener('dragover', ondragover);
upload.addEventListener('drop', ondrop);

function ondragover(event) {
    event.preventDefault();
}

function ondrop(event) {
    event.preventDefault();
    const { files } = event.dataTransfer;
    Array.from(files).forEach(blob => {
        const url = window.URL.createObjectURL(new Blob([blob]));
        const img = document.createElement('img');
        img.src = url;
        imageContainer.appendChild(img);
    })
}

    * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#app {
  width: 100vw;
  height: 100vh;
  padding: 50px 0 0 50px;
  box-sizing: border-box;
}

.upload {
  width: 360px;
  height: 180px;
  border: 1px dashed #c0c4cc;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.upload>div {
  color: #606266;
  font-size: 14px;
}

.images {
  width: 100%;
  margin-top: 10px;
}

.images img {
  width: auto;
  height: auto;
  margin-right: 20px;
}

  2. 效果展示

打赏作者
您的打赏是我前进的动力
微信
支付宝
评论

你好👏🏻，我是 ✍🏻   疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

目录

  1. 1. 表单
    1. 1.1. 新增表单控件
    2. 1.2. 新增表单属性
    3. 1.3. 表单验证反馈
    4. 1.4. 关闭验证
  2. 2. 拖拽
    1. 2.1. 元素拖动
    2. 2.2. Dom 事件
    3. 2.3. 目标元素 ondrop 不生效
    4. 2.4. 案例一 拖拽到其他容器
    5. 2.5. 案例二 图片拖拽上传