移动端开发-文本输入框

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

记录移动端开发文本输入框常用的HTML属性。

虚拟键盘inputmode属性

设置虚拟键盘的显示内容。

MDN inputmode

  • "none"
    无虚拟键盘。

  • "text"
    默认值，显示标准输入键盘。

  • "decimal"
    小数输入键盘，包含0到9的数字，小数点.。

  • "numeric"
    数字输入键盘，包含0到9的数字。

  • "tel"
    电话输入键盘，包含0到9的数字，星号（*）和井号（#）键等。表单输入里面的电话输入通常应该使用<input type="tel">。

  • "search"
    虚拟键盘Enter键可能会显示“搜索”，或其他优化。

  • "email"
    为邮件地址输入优化的虚拟键盘，通常包含@符号键和其他优化。表单里面的邮件地址输入应该使用<input type="email">。

  • "url"
    为网址输入优化的虚拟键盘，比如，“/”键会更加明显、历史记录访问等。表单里面的网址输入通常应该使用<input type="url">。

See the Pen Untitled by ly023 (@ly023) on CodePen.

虚拟键盘enterkeyhint属性

设置虚拟键盘Enter键的显示内容，只影响按钮的显示，不影响交互。

MDN enterkeyhint

兼容性：HTMLElement API: enterKeyHint

1
<input type="text" enterkeyhint="done">

enterkeyhint设置虚拟键盘Enter回车键的显示：

  • enter：回车，多出现在<textarea>文本域等需要多行输入的场景中
  • done：完成，表示没有更多内容输入，输入结束
  • go：前往，把用户带到他们输入的文本的目标处
  • next：下一项，通常会移动到下一个输入项那里
  • previous，上一个，通常会移动到上一个输入项那里
  • search：搜索，通常用在搜索行为中
  • send：发送，通常用在文本信息的发送上

See the Pen Using the enterkeyhint Attribute by ly023 (@ly023) on CodePen.

autocapitalize="off"关闭虚拟键盘首字母大写

1
<input type="text" autocapitalize="off" />

还可以在form标签上设置该属性，让每个表单项都继承autocapitalize的设置：

1
2
3
4
<form autocapitalize="off">
  <input type="text" placeholder="继承 form 的设置">
  <textarea></textarea>
</form>

autocapitalize取值：

  • none或off：所有字母小写

  • words：每个单词的开头字母会自动大写

  • characters：所有字母大写

  • sentences：每句开头字母自动大写

autocorrect=”off”关闭自动纠错功能

1
<input autocorrect="off" />

自动纠错功能会悄悄篡改原本的输入内容，用户很难注意到。