3 个 HTML5 输入属性帮助移动用户你感觉到痛苦吗？😫📱

2025-06-08

3 个 HTML5 输入属性帮助移动用户

你感觉到痛吗？😫📱

你感觉到痛吗？😫📱

  • 当您输入第一个字母后，您的手机会立即将第一个字母更改为大写吗？
  • 当您的手机认为单词拼写错误时会自动更正该单词吗？
  • 当您的用户名被标记为拼写错误并带有红色波浪线时？

如果上述任何一点在过去让您感到沮丧，那么您需要成为一名优秀的公民/开发人员，并确保在您的项目中使用这些属性。

  • 自动大写
  • 自动更正
  • 拼写检查

注意：这些属性仅适用于类型为text、email或textarea标签的输入标签。

自动大写

当此属性设置为none时，浏览器将停止尝试通过自动大写单词来帮助用户。

<input type="text" autocapitalize="none" />
Enter fullscreen mode Exit fullscreen mode

自动更正

此属性设置为关闭时，iOS 将停止在文本框中输入单词时自动更正。通常，此属性在用户名字段中关闭。例如，如果输入的字符串不在字典中，则不应自动更正。

<input type="text" autocorrect="off" />
Enter fullscreen mode Exit fullscreen mode

拼写检查

当此属性设置为false时，当单词拼写错误时，浏览器会停止用下划线突出显示。

<input type="text" spellcheck="false" />
Enter fullscreen mode Exit fullscreen mode

整合起来

下面是登录表单如何使用属性来方便移动用户使用的示例。

<form>
    <label for="username">Username</label>
    <input id="username" name="username" type="text" autocapitalize="none" autocorrect="false" spellcheck="false" />
    <label for="password">Password</label>
    <input id="password" name="password" type="password" />
    <button type="submit">Sign In</button>
</form>
Enter fullscreen mode Exit fullscreen mode
鏂囩珷鏉ユ簮锛�https://dev.to/deadlybyte/3-html5-input-attributes-to-help-mobile-users-1ofp
Devto 翻译
PREV
使用 Webpack 和 Babel 设置 React 应用程序
NEXT
Next.js：应用路由器 vs 页面路由器