重学JS—第19章表单

一、基础

简介

• form基于HTMLFormElement类型
• HTMLFormElement有自己的若干属性和方法
• 可以通过document.forms.name访问表单

基本操作

提交:submit()
重置:reset()

表单字段的公共属性

 disabled：布尔值，表示表单字段是否禁用。
 form：指针，指向表单字段所属的表单。这个属性是只读的。
 name：字符串，这个字段的名字。
 readOnly：布尔值，表示这个字段是否只读。
 tabIndex：数值，表示这个字段在按 Tab 键时的切换顺序。
 type：字符串，表示字段类型，如"checkbox"、"radio"等

• 除fieldset元素,input的部分属性,其余表单字段都适用上述属性
• JS可以动态修改表单属性
• HTML5 为表单字段增加了 autofocus 属性
• focus()的反向操作是 blur()，其用于从元素上移除焦点

表单字段的公共事件

 blur：在字段失去焦点时触发。
 change：在input和textarea元素的 value 发生变化且失去焦点时触发，或者在select元素中选中项发生变化时触发。
 focus：在字段获得焦点时触发。

二、文本框编程

选择文本

select事件
取得选中文本:扩展为文本框添加了两个属性：selectionStart 和 selectionEnd
部分选择文本:setSelectionRange

输入过滤

• 屏蔽字符

textbox.addEventListener("keypress", (event) => { 
	 event.preventDefault(); 
});

屏蔽固定的字符:

 if (!/\d/.test(String.fromCharCode(event.charCode)))

• 处理剪贴板
  与剪贴板相关的 6 个事件。
   beforecopy：复制操作发生前触发。
   copy：复制操作发生时触发。
   beforecut：剪切操作发生前触发。
   cut：剪切操作发生时触发。
   beforepaste：粘贴操作发生前触发。
   paste：粘贴操作发生时触发。
• 无论是在上下文菜单中做出选择还是使用键盘快捷键，copy、cut 和 paste 事件在所有浏览器中都会按预期触发。
• clipboardData: event的属性获取剪切板数据
• clipboardData 对象上有 3 个方法：getData()、setData()和 clearData()
  兼容浏览器写法:

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); 
    } 
}