Skip to main content

autocapitalize

autocapitalize​

autocapitalize全局属性是一个枚举属性，用于控制输入文本是否自动大写，以及如果是的话，采用何种方式进行大写。

autocapitalize在使用物理键盘输入时不会影响其行为，它主要用于移动设备上的虚拟键盘和语音输入。这可以帮助用户快速容易地输入，如自动使每个句子的首字母大写。

属性值​

  1. none或off 不开启自动大写。
  2. sentences或on 自动大写每个句子的第一个字母。
  3. words 自动大写每个单词的第一个字母。
  4. characters 自动大写每个字母。

使用建议​

  1. autocapitalize可用于<input>和<textarea>元素以及它们所在的<form>元素上。当该属性被用于<form>元素时，那么它会为所有包含的<input>和<textarea>自动设置大写的行为，并且会覆盖所包含元素的该属性。
  2. 当<input>的type为url、email和password时，自动大写永远不会被启用。
  3. 如果autocapitalize属性值未被明确，其默认值会根据浏览器的不同而有所不同。
    • Chrome和Safari默认值为sentences / on。
    • Firefox默认值为off / none。

行为模拟​

由于autocapitalize主要针对移动设备的虚拟键盘，因此对物理键盘支持欠佳，大部分情况下并不生效。 这种情况下，可通过CSS的text-transform属性或JavaScript来模拟此行为：

  • text-transform属性：
input {
  text-transform: capitalize;
  /* text-transform: lowercase; */
  /* text-transform: uppercase; */
}
  • 通过JavaScript控制：
function autoCapitalize() {
    const type = this.autocapitalize
    
    switch (type) {
        case 'sentences':
            this.value = sentences(this.value);
            break;
        case 'on':
            this.value = sentences(this.value);
            break;
        case 'words':
            this.value = words(this.value);
            break;
        case 'characters':
            this.value = characters(this.value)
            break;
        default:
            break;
    }

    function sentences(value) {
        return value.replace(/\w/, s => s.toUpperCase())
    } 

    function words(value) {
        return value.split(' ').map(v => sentences(v)).join(' ')
    }

    function characters(value) {
        return value.toUpperCase()
    }
}
Last updated on