密码页面技术问题求助：实现回车提交与去除输入框轮廓

1. 回车提交密码不重置页面 #

当前按回车重置页面是因为浏览器默认会触发表单的提交行为，导致页面刷新。解决核心是阻止默认提交行为，同时手动处理密码验证逻辑：

情况1：使用了<form>标签 #

给表单绑定submit事件，阻止默认刷新，再执行你的验证代码：

<form id="password-form">
  <input type="password" id="password-input">
</form>

<script>
const form = document.getElementById('password-form');
const passwordInput = document.getElementById('password-input');

form.addEventListener('submit', function(e) {
  // 阻止浏览器默认的表单提交刷新
  e.preventDefault();
  // 获取输入的密码
  const password = passwordInput.value;
  // 这里写你的密码验证逻辑，比如判断是否正确
  if (password) {
    console.log('开始验证密码:', password);
    // 验证通过后的操作，比如跳转页面等
  }
});
</script>

情况2：没有使用<form>标签 #

直接监听密码输入框的keydown事件，判断按下的是回车键后执行逻辑：

<input type="password" id="password-input">

<script>
const passwordInput = document.getElementById('password-input');

passwordInput.addEventListener('keydown', function(e) {
  if (e.key === 'Enter') {
    // 阻止可能的默认行为
    e.preventDefault();
    const password = this.value;
    // 执行密码验证逻辑
    console.log('提交密码:', password);
  }
});
</script>

之前修改按钮类型没用，是因为即使去掉按钮，浏览器依然会对表单（或输入框）触发默认的回车提交行为，必须通过JS阻止这个默认动作才行。

2. 去除密码输入框的点击轮廓 #

直接用CSS给输入框的focus状态设置outline: none即可，同时建议补充自定义焦点样式（可选），避免完全失去焦点反馈影响可访问性：

/* 去除默认焦点轮廓 */
input[type="password"]:focus {
  outline: none;
  /* 可选：自定义焦点样式，比如改变边框颜色 */
  /* border-color: #0066cc; */
}

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