Javascript/Typescript - 防止表单在提交时重置答案

【问题标题】：Javascript/Typescript - Prevent form from resetting on submitJavascript/Typescript - 防止表单在提交时重置
【发布时间】：2019-02-09 15:24:04
【问题描述】：

我有一个简单的打字稿类，想在提交时显示输入结果。即使已经问过这个问题，event.preventDefault() 也不起作用。也许你能给我一些提示？

class LoginPanel {

    public appDiv: HTMLElement = document.getElementById('app');

    constructor() {
        this.setForm();
        let btn = document.getElementById('loginButton');
        btn.addEventListener('submit', (event) => {event.preventDefault(); this.submitForm()});
    }

    public setForm(): void {
        this.appDiv.innerHTML = `<form id="loginForm" class="form-signin mt-5">
      <div class="text-center">
      <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
      </div>
      <label for="inputEmail" class="sr-only">Email address</label>
      <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required="" autofocus="">
      <label for="inputPassword" class="sr-only">Password</label>
      <input type="password" id="inputPassword" class="form-control mt-1" placeholder="Password" required="">
      <button id="loginButton" class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
    </form>
    `;
    }

    public submitForm(): void {
        const elementFirst: HTMLElement = document.createElement('pre');
        const elementSecond: HTMLElement = document.createElement('pre');

        elementFirst.innerHTML = 'email: ' + document.getElementById('loginForm')[0].value;
        document.getElementById('loginForm').appendChild(elementFirst);

        elementSecond.innerHTML = 'password: ' + document.getElementById('loginForm')[1].value;
        document.getElementById('loginForm').appendChild(elementSecond);
    }

}

new LoginPanel();

【问题讨论】：

标签： javascript forms typescript form-submit onsubmit

【解决方案1】：

您可以在表单上改用onsubmit="return false"：

<form id="loginForm" class="form-signin mt-5" onsubmit="return false">
  <div class="text-center">
  <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
  </div>
  <label for="inputEmail" class="sr-only">Email address</label>
  <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required="" autofocus="">
  <label for="inputPassword" class="sr-only">Password</label>
  <input type="password" id="inputPassword" class="form-control mt-1" placeholder="Password" required="">
  <button id="loginButton" class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>

What's the difference?

不同的是return false；更进一步，它还可以防止该事件传播（或“冒泡”）DOM。你可能不知道的一点是，每当元素上发生事件时，该事件也会在每个父元素上触发。

或者，您可以在表单元素上使用event.stopPropagation：

constructor() {
  this.setForm();
  let btn = document.getElementById('loginButton');
  btn.addEventListener('click', (event) => { this.submitForm()});
  let form = document.getElementById('loginForm');
  form.addEventListener('submit', (event) => { event.preventDefault(); event.stopPropagation; });
}

见：What's the difference between e.preventDefault(); and return false?

【讨论】：

【解决方案2】：

当您提交表单时，您会提交其所有值，而不仅仅是一个按钮。

因此，防止默认设置的正确位置是表单元素本身，而不是其按钮。

constructor() {
    this.setForm();
    const form = document.getElementById('loginForm');
    form.addEventListener('submit', (event) => {event.preventDefault(); this.submitForm()});
}

你可以看到in this CodePen.

【讨论】：