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' 
});