Skip to content

[Feature] The input box of the login and MFA verification pages automatically obtains focus function requests #8032

@lainbo

Description

@lainbo

1Panel Version

1.10.26

问题描述:

在1Panel的登录流程中,输入框没有自动获取焦点,导致密码管理工具(如Bitwarden)的自动填充体验不佳。

详细说明:

  • 登录界面的用户名密码输入框:虽然可以通过Bitwarden自动填充,但默认不获取焦点
  • MFA验证码输入页面:跳转到该页面后,输入框不自动获取焦点

影响的用户体验:

当使用Bitwarden等密码管理工具时,验证码已被复制到剪贴板,但由于输入框未获得焦点,无法直接使用键盘快捷键粘贴,需要额外的鼠标点击操作。

建议改进:

为登录页面的用户名输入框和MFA验证码输入框添加自动获取焦点功能,以实现更流畅的登录体验,特别是对于使用密码管理工具的用户。

建议实现方式:

系统前端使用的是Element Plus,该框架的Input组件提供了focus方法可用于获取焦点。参考官方文档:https://element-plus.org/zh-CN/component/input.html#exposes

可以在页面加载完成后调用相应输入框组件的focus()方法,示例:

// 在组件挂载后自动获取焦点
onMounted(() => {
  // 使用ref获取输入框实例
  inputRef.value.focus()
})

对于MFA验证页面,可在页面切换/跳转完成后立即触发focus()方法。


Additional Information

这是现在的样子,MFA这里的输入框因为没有自动获取输入框焦点,导致必须挪一下鼠标,如果能自动获取焦点,不触碰鼠标的全键盘登录的用户体验一定更好!

1740657385006-20250227_195438__92pct_smaller.mp4

Metadata

Metadata

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions