is属性与自定义元素与表单提交行为阻止实例页面

回到相关文章 »

效果：

默认表单：

表单设置is：

//zxx: 点击后面的表单页面不会提交

代码：

HTML代码：

<h4>默认表单：</h4>
<form>
    <input type="search" placeholder="请输入">
    <button type="submit">搜索</button>
</form>

<h4>表单设置is：</h4>
<form is="form-prevent">
    <input type="search" placeholder="请输入">
    <button type="submit">搜索</button>
</form>

JS代码：

class FormPrevent extends HTMLFormElement {
  constructor() {
    // 总是在constructor中先调用super
    const self = super();
    self.addEventListener('submit', function (event) {
        event.preventDefault();
    });    
  }
}
// 定义新的元素
customElements.define('form-prevent', FormPrevent, { 
  extends: 'form' 
});