html - 谷歌浏览器/macOS : Password field won't accept non-ASCII characters

标签 html macos google-chrome passwords usability

Update

Apparently this is an unresolved issue with the OS X version of Google Chrome. It was first reported over seven years ago. If you happen to find yourself needing to enter a password containing non-ASCII characters, then here are your options:

  • Type in the password somewhere else and transfer it to the password field via the clipboard.
  • Use the developer tools to change the input type from password to text.
  • Use a different browser

对于可以在密码字段中输入的字符有什么规定吗?我一直在 Mac 上试用 Chrome,看起来我只能输入“特殊”字符,如果它们可以通过一次按键产生(不包括修饰键,如 AltShift ).

例如,我可以通过一次按键 (AltG) 输入版权符号 (©),但带有变音符号 (ö) 的字母“o”需要两个(AltU 后跟 O)。在后一种情况下,变音符号不会出现在密码中。在 Windows 中,这些字符似乎是通过在按下 Alt 键的同时输入魔数(Magic Number)获得的,因此这种行为可能存在跨平台差异。也可能存在跨浏览器差异。

我问的原因是因为我想实现一个带有密码输入字段的注册表单,可以从 type="password" 切换到 type="text “。这允许用户检查该字段的内容(假设这样做是安全的),并允许我使用随 secret 码生成器预先填充该字段,然后用户可以将其复制到确认字段中。但是通过这样做,我正在更改该字段接受的字符集。这显然是不可取的;例如,如果我选择 Röntgen 作为密码,我将永远无法登录(除非登录表单也可以切换)。

那么最好的方法是什么?我不想完全禁止特殊字符,但限制所有人使用可打印的 ASCII 看起来是最简单的选择。

为了说明这个问题,这里有一个包含两个密码字段的表单。一个字段可以切换为普通文本输入。单击按钮以显示这两个字段的内容。

function reveal() {
  if ($('#p1').attr('type') == 'password') {
    $('#p1').attr('type', 'text');
    $('#r').html('(Hide)');
  }
  else {
    $('#p1').attr('type', 'password');
    $('#r').html('(Reveal)');
  }
}

function show_passwords() {
  $('#out1').html($('#p1').val());
  $('#out2').html($('#p2').val());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <form onsubmit="return false;">
    <p><label>Password:<br><input type="password" id="p1" name="p1" size="20"></label>
    <small><a id="r" href="#" onclick="reveal()">(Reveal)</a></small></p>
    <p><label>Confirm password:<br><input type="password" id="p2" name="p2" size="20"></label></p>
    <p><button onclick="show_passwords(); return false">Show password field contents</button></p>
  </form>
</div>
<table style="min-width:20em; border: 1px solid #bbb">
  <tr><td style="width:8em">Password:</td><td id="out1"></td></tr>
  <tr><td>Password confirm:</td><td id="out2"></td></tr>
</table>

最佳答案

有关 chromium bugtrack 的报告的原始作者在这里。我被告知在 webkit's bugtraq 上打开同样的问题(当时 Chrome 在 webkit 上运行)并且 webkit 开发人员告诉我 Cocoa(OSX UI 框架)不允许在密码字段上使用非 ASCII 字符(我已经发现了这个问题,我的 OSX 密码不像我的那样具有挑战性在线服务密码),并且 Webkit 努力模仿本地行为。所以问题不在于您的浏览器,而在于 OSX 本身。

公平地说,当 Chrome 切换到 Blink 时,bugtrack 上有一条新消息:

This is still an issue. On the original WebKit bug, it was "decided" that allowing dead key input in password controls is not an ideal solution, and WebKit should strive to follow Cocoa's behavior.

As it stands now, Blink fails in both manners: dead keys do not behave as they do in text fields, and they do not follow NSSecureTextField's behavior either (i.e. behaving a though the key is not a dead key).

WebKit 601.2.7 in Safari 9.0.1 behaves as expected. Should Blink follow platform behavior as well, or would supporting dead keys in password fields be preferred?

但是时间过去了,到目前为止什么都没有改变......

我只使用 Firefox,它不遵循 Cocoa 的限制,并且允许密码字段上的任何字符。

如果您不想强制您的用户,只需从您生成的密码中跳过非 ASCII 字符即可。

关于html - 谷歌浏览器/macOS : Password field won't accept non-ASCII characters,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50114072/

相关文章:

objective-c - 滚动 NSScrollView 同时尝试保留 subview 的位置

macos - 如何从终端运行 mvim (MacVim)?

css - 选择(下拉)的背景图像在 Chrome 中不起作用

android - 在移动版 Chrome 浏览器中禁用滑动手势

html - 如何在 Safari 和移动设备上防止 overflow-x

javascript - 获取表单值仅在 IE 中返回未定义

java - 如何在 Mac 上安装旧版本的 JDK?

c# - WebDriver - 元素不可点击 Chrome

javascript - 页面位于另一个页面内

jquery - 使用类存储 div 的 html 值,并稍后使用 jQuery 调用它们