[JS] 表单相关

定义表单

<form 
	method="post" 
	action="/user" 
	enctype="application/x-www-form-urlencoded"
>
	<div>账号：<input size="20" /></div>
	<div>密码：<input size="20" type="password"/></div>
	<button type="submit">登录</button>
</form>

上面定义了一个最简单的表单元素，用于提交用户的登录信息。对于 form 标签，常用的属性如下：

• method 指定向服务器发送请求的方式 （get 或者 post）
• action 指定向那个 URL 发送请求
• enctype 可选值为 application/form-data 或者 application/x-www-form-urlencoded 表示传参的格式。一般还有第三种格式：json，但是这种格式一般用于脚本模拟表单提交。

input 标签常用的属性有：

• type input 的类型，默认为 text，还可有 radio、checkbox、mail、number、password、tel 等选项
• required 必须输入值
• autofocus 自动获取焦点
• value input 的值，会作为发送请求时的值
• name radio 或者 checkbox 类型的输入框以这个属性为分组依据
• id label for 指定的 id，点击 label 会聚焦 input

input 标签常见事件监听

• change 输入数据且失去焦点时触发
• input 输入数据时触发
• blur 失去焦点触发
• keypress 按下按键触发

input DOM 常见方法/属性

• select() 选择所有文本。可以在 focus 事件监听，然后调用该方法以选择默认输入
• selectionStart、selectionEnd 一个数字，表示选择的文本的起始下标和结束下标
• focus()
• blur()

剪贴板事件

function getClipboardText(event) {
 var clipboardData = (event.clipboardData || window.clipboardData);
 return clipboardData.getData("text");
}

function setClipboardText(event, value) {
  if (event.clipboardData) {
    return event.clipboardData.setData("text/plain", value);
  } else if (window.clipboardData) {
    return window.clipboardData.setData("text", value);
  }
}

主要监听 input 的 copy、cut、paste 事件，这些事件的 event 对象有操作剪贴板的方法。

选择框编程

选择框由 <select> 和 <option> 创建，可以给 select 元素添加 multiple 属性表示多选。该
元素常用属性和方法有：

• selectedIndex 选中的元素下标，如果是多选框，则始终是第一个元素的下标
• options 所有 <option> 元素
• option 元素有一个 selected 属性表示该选项是否被选中
• remove(idx) 移除第 idx 个 option

option 的 value
如果不给 option 元素指定 value，则选中的值是 option 的内容，否则是 value 指定的值。