首字母自动大写autocapitalize

在 iOS 中,用户可以手动开启「首字母自动大写」功能,这样输入英文的时候,首字母便会自动大写。但是,有些时候并不希望一直是首字母大写的。比如用户名这个字段,如果字段本身就是区分大小写的,首字母自动大写往往会给用户带来麻烦。可以通过在表单元素上可以通过设置autocapitalize="off"来关闭。

<input type="text" autocapitalize="off" placeholder="用户名-关闭首字母大写">

还可以在form元素上设置该属性,让里面的每个元素都继承autocapitalize的设置。

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

iOS 5 开始新增了很多关键字:

none等同于off

当设置了autocapitalize="words"时,每个单词的开头字母会自动大写。

当设置了autocapitalize="characters"时,每个字母都会大写。

当设置了autocapitalize="sentences"时,每句开头字母会自动大写。

这里有一个综合示例

<form autocapitalize="words">
名字: <input name="first-name">
姓氏: <input name="last-name">
国家: <input name="state" autocapitalize="characters">
昵称: <input name="username" autocapitalize="off">
评论: <textarea name="comment" autocapitalize="sentences"></textarea>
</form>

需要注意几点:

<input type="password" >始终不会开启自动首字母大写。

如果在设置中没有开启「首字母大写」,即使设定autocapitalize="on"也不会有作用。 (设置方法: 在设置→通用→键盘中开启「首字母自动大写」)

如果「自动改正」和「首字母大写」都启用了,那么提示的字母也是首字母大写的。

越狱后安装的中文输入法里自带的英文输入模式可能会不支持「首字母自动大写」功能。

在删除后,再次输入依然是大写的,这一点体验比黑莓好。

自动改正autocorrect

这是一个布尔属性,可以设置off来关闭,同样可以设置在form元素上

<input type="text" autocorrect="off" placeholder="用户名-关闭自动改正">

参考

为移动而生的 HTML 属性autocapitalize和autocorrect

autocapticalize和autocorrect的更多相关文章

  1. input的三个属性autocomplete、autocapitalize和autocorrect

    下面的input的三个属性是H5新增的属性 <input type="text" class="input-search" placeholder=&qu ...

  2. [tire+最短路]Bless You Autocorrect!

    [tire+最短路]Bless You Autocorrect! Typing on phones can be tedious. It is easy to make typing mistakes ...

  3. Bless You Autocorrect!

    题目链接: https://odzkskevi.qnssl.com/0c87453efec2747f8e8a573525fd42f9?v=1533651456 题解: 这是一道Trie+BFS的题目: ...

  4. npm 使用小结

    本文内容基于 npm 4.0.5 概述 npm (node package manager),即 node 包管理器.这里的 node 包就是指各种 javascript 库. npm 是随同 Nod ...

  5. AlloyTeam2015前端大会都说了啥

    昨天在腾讯大厦参与了鹅厂AlloyTeam召开的AC2015前端大会,度过了充满精彩和收获的一个下午,用一句话形容这次前端Event应该是“诚意满满,干货满满”. 说实话,这次AlloyTeam没有对 ...

  6. React Native 之 TextInput使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  7. 【原】移动web资源整理

    2013年初接触移动端,简单做下总结,首先了解下移动web带来的问题 设备更新换代快——低端机遗留下问题.高端机带来新挑战 浏览器厂商不统一——兼容问题多 网络更复杂——弱网络,页面打开慢 低端机性能 ...

  8. 【转】web移动端一些常用知识

    1.去掉 a,input 在移动端浏览器中的默认样式(半透明灰色遮罩阴影) a,button,input,optgroup,select,textarea { -webkit-tap-highligh ...

  9. 移动web资源整理

    [原]移动web资源整理 2013年初接触移动端,简单做下总结,首先了解下移动web带来的问题 设备更新换代快--低端机遗留下问题.高端机带来新挑战 浏览器厂商不统一--兼容问题多 网络更复杂--弱网 ...

随机推荐

  1. SVN之文件同步更新

    在SVN的实际使用上,我有这样的一个需求,同一份保存在SVN库的文件,要求取出在不同的地方,并且仍然要保持同步.根据这样的需求,可以具体分为以下两种情况,下面以库文件A,副本文件A1和副本文件A2,来 ...

  2. CSDN 自动评论

    转载说明 本篇文章可能已经更新,最新文章请转:http://www.sollyu.com/csdn-auto-reviews/ 说明 当打开http://download.csdn.net/my/do ...

  3. link方式安装Eclispe插件:greenUML

    用Link方式安装Eclipse插件有几点好处: (1)把自己的插件和Eclipse自带的插件分离 (2)可以通过修改link文件来决定是否加载该插件 (3)重新安装Eclipse的时候,直接拷贝自己 ...

  4. Mysql MyISAM数据库批量转换表引擎为Innodb

    Mysql MyISAM数据库批量转换表引擎为Innodb 最近在做事物处理需要把表结构都改为带有支持事物的Innodb引擎格式, 把里面数据库 用户名.密码 等信息修改为你自己的,放在网站下运行即可 ...

  5. PHPExcel读取excel03/07版到数组

    想总结下PHPExcel的读取excel到数组的function,用的时候直接调取,懒…… 参考了以下链接: http://www.jb51.net/article/29071.htm http:// ...

  6. PHPCMS v9栏目添加字段及描述编辑器修改方法

    为PHPCMS v9栏目添加字段和把描述的textarea编辑器变成fceditor编辑器的方法.如下: 1. 添加数据库字段:description1,添加位置:v9_catetory表 2. 在c ...

  7. Python试卷

    3.写一个函数,计算一个给定的日期是该年的第几天. def getday(self,y=None,m=None,d=None): date = datetime(y,m,d) days = date. ...

  8. 1059. Prime Factors (25)

    时间限制 50 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 HE, Qinming Given any positive integer N, y ...

  9. 计算器(delphi)

    unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...

  10. IIS7 无法访问请求的页面,因为该页的相关配置数据无效

    HTTP 错误 500.19 - Internal Server Error 无法访问请求的页面,因为该页的相关配置数据无效. 解决方案: C:\Windows\Microsoft.NET\Frame ...