Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Chrome 浏览器上自动填充密码时 n-input placeholder 未隐藏,导致 placeholder 文本与输入框内容重叠 #2234

Closed
Salt1024 opened this issue Jan 21, 2022 · 4 comments
Labels
consideration-needed help wanted Extra attention is needed

Comments

@Salt1024
Copy link

TuSimple/naive-ui version (版本)

2.24.1

Vue version (Vue 版本)

3.2.27

Browser and its version (浏览器及其版本)

92.0.4515.107

System and its version (系统及其版本)

Windows 10

Node version (Node 版本)

Reappearance link (重现链接)

https://codesandbox.io/s/sleepy-brown-mem8l?file=/src/App.vue

Reappearance steps (重现步骤)

代码:https://codesandbox.io/s/sleepy-brown-mem8l?file=/src/App.vue
预览:https://mem8l.csb.app/

  1. 打开预览页,输入用户名密码,点击地址栏右侧的🔑按钮,保存密码;
  2. 刷新页面,等待浏览器自动填充用户名密码。

Expected results (期望的结果)

用户名密码自动填充,placeholder 内容隐藏

Actual results (实际的结果)

用户名密码自动填充,placeholder 内容未隐藏,两者重叠在一起

Remarks (补充说明)

排查后发现,Chrome 浏览器在页面未获得焦点时,自动填充后 input 会延迟触发 focus 事件,导致 placeholder 未自动隐藏。直到点击页面任意位置,页面获得焦点后,输入框的 focus 事件触发,显示正常。

使用原生 input 的 placeholder 不存在此问题。

@github-actions github-actions bot added the untriaged need to sort label Jan 21, 2022
@XieZongChen XieZongChen added consideration-needed help wanted Extra attention is needed and removed untriaged need to sort labels Jan 21, 2022
@07akioni
Copy link
Collaborator

你是还想保持自动填充的功能吗?

@07akioni
Copy link
Collaborator

我找到办法了,已经解决

@zhaoliangshun
Copy link

@07akioni ,我碰到了同样的问题,请问您的解决办法是什么啊

@XieZongChen
Copy link
Collaborator

@07akioni ,我碰到了同样的问题,请问您的解决办法是什么啊

看起来还没修复?我看了一下对应的提交已经解决了

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
consideration-needed help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

4 participants