• [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 对象有操作剪贴板的方法。

    选择框编程

    选择框由