一、accesskey
1、基本介绍
accesskey 属性用于为元素定义快捷键，让用户可以通过键盘快速聚焦或激活特定元素（例如，链接、按钮、表单输入框等）
触发方式（不同平台 / 浏览器）如下
2、演示
<form>
<label>用户名:</label>
<input type="text" accesskey="u" />
<br />
<label>密码:</label>
<input type="password" accesskey="p" />
<br />
<button accesskey="l" type="submit">登录(L)</button>
</form>
<a href="/help" accesskey="h">帮助(H)</a>
二、autocapitalize
1、基本介绍
- autocapitalize 属性用于控制用户输入文本时，浏览器是否自动将首字母大写，这个属性主要针对移动设备上的虚拟键盘
| off / none | 没有应用自动大写（所有字母都默认为小写字母） |
| on / sentences | 每个句子的第一个字母默认为大写字母；所有其他字母都默认为小写字母 |
| words | 每个单词的第一个字母默认为大写字母；所有其他字母都默认为小写字母 |
| characters | 所有的字母都默认为大写 |
2、演示
<textarea autocapitalize="none"></textarea>
<textarea autocapitalize="sentences"></textarea>
<textarea autocapitalize="words"></textarea>
<textarea autocapitalize="characters"></textarea>
三、autocorrect
1、基本介绍
- autocorrect 属性控制是否针对拼写 / 标点符号错误启用可编辑文本的自动更正特性
| on / ""（空字符串） | 启用拼写和标点符号的自动更正特性 |
| off | 禁用可编辑文字的自动更正 |
不支持自动更正的 <input> 元素类型，始终处于 off 状态：password、email、url
对于所有其他可编辑元素，设置上述值以外的任何其他值都会被视为 on（未嵌套在 <form> 内的元素的默认值为 on）
嵌套在 <form> 中时，如果已经设置了 autocorrect，则以下元素将从表单中继承其默认值：<button>、<fieldset>、<input>、<output>、<select>、<textarea>
2、演示
<label for="vegetable">一种蔬菜：</label>
<input id="vegetable" name="vegetable" type="text" autocorrect="on" />
<label for="fruit">一种水果：</label>
<input id="fruit" name="fruit" type="text" autocorrect="off" />
if ("autocorrect" in HTMLElement.prototype) {
console.log("支持自动更正特性");
} else {
console.log("不支持自动更正特性");
}
四、autofocus
1、基本介绍
- autofocus 属性用于在页面加载时自动将焦点移动到指定元素上，让用户可以直接开始输入或操作
2、演示
<h2>用户注册表单</h2>
<form>
<div class="form-group">
<label>用户名：</label>
<input type="text" autofocus placeholder="自动获得焦点" />
</div>
<div class="form-group">
<label>邮箱：</label>
<input type="email" placeholder="需要手动点击或按 Tab 键" />
</div>
<div class="form-group">
<label>密码：</label>
<input type="password" placeholder="需要手动点击或按 Tab 键" />
</div>
<div class="form-group">
<label>性别：</label>
<select>
<option>男</option>
<option>女</option>
</select>
</div>
<div class="form-group">
<label>个人简介：</label>
<textarea rows="3" placeholder="选填…"></textarea>
</div>
<button type="submit">注册</button>
</form>
.form-group {
margin: 10px 0;
}
label {
display: inline-block;
width: 80px;
}
input,
textarea,
select {
padding: 8px;
width: 200px;
}
五、contenteditable
1、基本介绍
- contenteditable 属性表示元素是否可被用户编辑，如果可以，浏览器会修改元素的组件以允许编辑
| true 或空字符串 | 表示元素是可编辑的 |
| false | 表示元素不是可编辑的 |
| plaintext-only | 表示元素的原始文本是可编辑的，但富文本格式会被禁用 |
2、演示
<div contenteditable="true">这段文字用户可以编辑</div>
<div contenteditable="false">这段文字不能编辑</div>
