HTMLFormElement类型的属性
- acceptCharset(等价于HTML的 accept-charset特性)
- action
- elements
- enctype
- length
- method
- name
- reset()
- submit()
- target
- 继承自HTMLElement
document.forms可以取得页面中的所有表单。
- document.forms[0];
- document.forms[“form2”];name为form2的属性
- document.form2;//不推荐,form2为表单name
表单提交
- <input>和<button>的type=”submit”时
- 图像按钮的type=”image”
- 相应表单控件拥有焦点可以提交
- event.preventDefault()阻止默认行为阻止表单提交
- 调用submit()方法提交表单时不会触发submit事件,因为记得先验证数据
重置表单
- type=”reset” 的input和button元素
- 调用reset()方法时会触发reset事件
表单字段
- form.elements[name]会返回同样名字的NodeList
- fieldset除外都共有 以下的属性
- disabled
- form
- name
- readOnly
- tabIndex
- type
- value
- 除fieldset外表单的type值如下
- select-one
- select-multiple
- submit
- button
- reset
- submit
- select的type值是只读的
- autofocus值为true时自动取得焦点
- 以下3事件
- blur
- change
- focus
文本框脚本
- type为text的input可以设置size值指定文本框可以显示的字符数(1个汉字为2个字符)
- 最好使用value属性修改文本框而不是用DOM方法(如setAttribute)
选择文本
- textbox.select()获得焦点时选取所有文本
- select事件。和select()对应
- selectionStart和selectionEnd属性代表选中的开头和结尾
- document.selection保存着整个文本范围内选择的文本
- document.selection.createRange().text;//选取的文本
- textbox.setSelectionRange(start,end);//选取start-end之间的文本。
IE兼容的选择文本
textbox.value = “Hello world!”;
var range = textbox.createTextRange();
range.collapse(true);
range.moveStart(“character”,0);
range.moveEnd(“character”,textbox.value.length);
range.select();//Hello world!
range.collapse(true);
range.moveStart("character",4);
range.moveEnd("character",3);
range.select();//"o w"
过滤输出
- keypress事件
- event.ctrlKey;//按下ctrl键
剪贴板操作
- beforecopy
- copy
- beforecut
- cut
- beforepaste
- paste
- 访问剪贴板使用clipboardData对象。IE属于window对象,其他属于event对象。
- clipboardData 有以下三个方法
- getData();//接受
- setData()
- clearData()
- required
- “required” in document.createElement(“input”);//检测是否支持required
- input type=”email” “url”.
- input.stepUp()
- input.stepDown()
- checkValidity()//可以对表单自身使用。如果有一个无效,那么全部无效。
- validity
- customError
- patternMismatch
- rangeOverflow
- rangeUnderflow
- stepMismatch
- tooLong
- typeMismatch
- valid
- valueMissing
- novalidate
- formnovalidate
- HTMLSelectElement
- add(newOption,relOption);
- multiple
- remove(index);
- selectedIndex
- size(选择框可见行数)
- options
- HTMLOptionElement
- index
- label
- selected
- text
- value
- encoudeURIComponent()
- designMode
- contenteditable
- document.execCommand()
- document.queryCommandEnablled()
- document.queryCommandValue()
- iframe.getSelection()
- -