JavaScript中如何通过表单获取并保存用户昵称？

我正在实现一个功能，允许用户提交昵称并在后续JavaScript代码中保存使用。通过自定义元素创建了表单，显示正常，但点击确认按钮后控制台无输出，无法获取用户输入的昵称，怀疑问题出在saveName()方法，不清楚如何获取用户实际输入的内容。

原代码如下：

const template = document.createElement('template')

template.innerHTML = `
  <div>
  <form id="createName">
    <label for="name">Write your name here:</label>
    <input type="text" id="name">

    <button id="confirm">Confirm</button>
  </form>
  </div>
`

class createName extends HTMLElement {
  constructor() {
    super()

    this.attachShadow({ mode: 'open' });
    this.shadowRoot.appendChild(template.content.cloneNode(true));

  }

  saveName() {
    let nickname = this.shadowRoot.querySelector('#name').value
    console.log(nickname)
  }

  connectedCallback() {
    this.shadowRoot.querySelector('#confirm').addEventListener('click', () => this.saveName())
  }
}

window.customElements.define('name-form', createName)

问题原因 #

按钮默认的type是submit，点击后会触发表单的默认提交行为，导致页面刷新，console.log的内容还没来得及在控制台显示就被页面刷新覆盖了，并非saveName()方法获取不到输入值。

解决方案 #

有两种办法解决这个问题：

方法一：阻止表单的默认提交行为 #

修改saveName方法，添加事件参数并调用preventDefault()：

saveName(e) {
  e.preventDefault(); // 阻止表单默认提交行为
  let nickname = this.shadowRoot.querySelector('#name').value
  console.log(nickname)
}

// 同时修改事件监听的传参
connectedCallback() {
  this.shadowRoot.querySelector('#confirm').addEventListener('click', (e) => this.saveName(e))
}

方法二：修改按钮的type为button #

直接在模板里给按钮添加type="button"，让它不再触发表单提交：

<button id="confirm" type="button">Confirm</button>

两种方法都能解决页面刷新的问题，此时点击确认按钮就能在控制台看到输入的昵称了。如果需要后续保存昵称，可以将nickname存储到localStorage或者组件的属性中，比如：

saveName(e) {
  e.preventDefault();
  let nickname = this.shadowRoot.querySelector('#name').value
  localStorage.setItem('userNickname', nickname); // 保存到localStorage
  console.log('昵称已保存:', nickname)
}

内容的提问来源于stack exchange，提问作者TeaTime