input的属性、事件及其应用(持续)

众所周知,html中的<input/>标签可以说是h5中属性及事件最复杂也最多的标签,本文旨在记录工作中遇到的,不常用的input相关属性及事件。

1.属性

1.1 capture属性

*源于某需求要求只调摄像头拍照而不能调相册,且默认调起前置摄像头。

1
<input type="file" accept="image/*" name="image" capture="user">

当一个input元素的type属性是文件上传的状态时,并且它的accept属性是特定的,capture的属性规则将适用。

capture属性的关键词是”user”和”environment”,它们映射到各自的状态用户和环境。状态用户和环境的语义反映了在videoFacingModeEnum中定义的同名枚举值。此外,还有第三种状态,即特定于实现的状态。缺少的默认值是特定于实现的状态。无效值默认值也是特定于实现的状态。

注意,如果user agent无法支持首选朝向模式,它可以返回到特定于实现的默认面向模式,该模式映射到特定于实现的状态,该状态指示实现将根据其默认行为进行操作。

capture IDL属性必须反映相同名称的相应内容属性。当指定了捕获属性时,用户代理应该调用特定捕获控件类型的文件选择器。

当指定了捕获属性时,用户代理不能将捕获的媒体保存到任何本地或远程数据存储中。

注意:当脚本获得从文件选取器(由文件列表对象表示)中选择的文件的访问权限时,它们可以使用各种机制来存储捕获的媒体。这些机制超出了本规范的范围。

如果接受属性的值设置为没有关联捕获控制类型的mime类型,则用户代理必须充当没有捕获属性的角色。

注意:如果input标签含multiple属性,capture就失效了。

1.1.1 举例

调起前置摄像头拍照或录像
1
2
3
4
5
<!-- 拍照 -->
<input type="file" accept="image/*" capture="user">

<!-- 录像 -->
<input type="file" accept="video/*" capture="user">
调起后置摄像头拍照或录像
1
2
3
4
5
<!-- 拍照 -->
<input type="file" accept="image/*" capture="environment">

<!-- 录像 -->
<input type="file" accept="video/*" capture="environment">

1.2 autocapitalize属性 autocapitalize是一个枚举属性,它控制用户输入/编辑文本输入时文本输入是否自动大写,以及如何自动大写。属性必须取下列值之一:

  • off or none: 没有应用自动大写(所有字母都默认为小写字母)。
  • on or sentences: 每个句子的第一个字母默认为大写字母;所有其他字母都默认为小写字母。
  • words: 每个单词的第一个字母默认为大写字母;所有其他字母都默认为小写字母。
  • characters: 所有的字母都默认为大写。

在物理键盘上输入时,autocapitalize 属性不会影响行为。相反,它会影响其他输入机制的行为,比如移动设备的虚拟键盘和语音输入。这种机制的行为是,它们经常通过自动地将第一个句子的字母大写来帮助用户。autocapitalize 属性使作者能够覆盖每个元素的行为。

autocapitalize 属性永远不会为带有 type 属性,其值为 url, email 或 password的 元素启用自动大写。

1.3 autocorrect属性(非标准)

在ios中,autocorrect属性用来控制用户输入/编辑文本输入时文本输入是否开启自动纠正。属性必须取下列值之一:

  • on:开启;
  • off:关闭

参考资料: