Appearance
表单
form
在HTML中表单是form元素表示，其有element元素的属性 也有独有的属性方法
- acceptCharset
- action
- elements
- enctype
- length
- method
- name
- target
- reset()
- submit()
表单元素
共有一些属性
- disabled Boolean 字段是否被禁用
- form 只读 指向当前字段所属表单
- name String 表单字段名称， 用于form[name]获取元素，label元素的 id指向name （ 最好全局唯一）
- readOnly Boolean 字段是否只读
- tabIndex Number 当前字段的切换序号(tab)
- type String 字段的类型 input(text)
- value String 当前字段提交服务器的值
- autofocus Boolean 自动获取焦点 (HTML5) IE不支持
共有的一些方法
- focus() 自动获取焦点 会触发 focus focusin 方法
- blur() 失去焦点 会触发 blur focusout方法
- input/textarea的方法
- select() 选中文本框中的所有文本 会触发select事件
- setSelectionRange() //设置选中的文本 // IE9+、其他
一些事件
- focus/blur
- change input/textarea 获取焦点、失去焦点、value值发生改变 都会触发 select只要用户选择了不同的选项
如何获取表单
- 1、 id class等
- 2、document.forms表单数组 然后通过索引或者name获取
javascript
console.log(document.forms['login']) //form元素
console.log(document.forms[0]) //form元素 不建议使用
console.log(document.getElementById("login"))表单的提交、重置
- 1、 HTML元素上只要表单中input、button(type = submit) 获得焦点时按回车 或者button.submit点击都会触发 表单的提交事件（刷新页面）
- 2、 document.getElementById("login").submit() 也可以提交表单 但是不会触发表单的submit事件
javascript
utils.addEvent(document.getElementById("login"),'submit',function(e){
console.log(e);
utils.stopDefault(e); // 阻止表单的默认提交行为
})javascript
// 表单的重置
// <button type="reset">表单重置</button>
utils.addEvent(document.getElementById("login"),'reset',function(e){
console.log('表单重置了');
console.log(e);
// utils.stopDefault(e); // 阻止表单的重置行为 恢复表单默认内容数据
})表单的elements
保存表单中所有元素的集合
javascript
console.log(document.forms['login'].elements) // 跟forms一眼 可以通过索引或者元素的name获取元素 只包含 input select button textarea 等
console.log(document.forms['login'].elements['city']) // select
console.log(document.forms['login'].elements[3]) // select
var input1 = document.forms['login'].elements['userName'];
console.log(input1.disabled); //trur
console.log(input1.readonly); // undefined
console.log(input1.name); // userName
console.log(input1.form); // <form>
console.log(input1.type); // text
console.log(input1.value); // 默认值
console.log(input1.tabIndex); // 2
input1.focus(); // 自动获取交单表单元素使用
1、输入框过滤输入
一般 使用键盘事件 keypress
javascript
utils.addEvent(document.getElementById("filter1"), 'keypress', function(e) {
var charCode = e.charCode;
// FF和safari3.1以前版本会对方向键、退格键、删除键触发keypress事件 charcode > 9 可修复此Bug
// 为什么 !event.ctrlKey 是因为 需要确保用户可以复制粘贴 需要使用ctrl
// 不能过滤中文 失败呀........
console.log(String.fromCharCode(charCode));
if (!/\d/.test(String.fromCharCode(charCode)) && charCode > 9 && !event.ctrlKey) {
utils.stopDefault(e);
}
})2、延迟 500 秒输入 处理事件
javascript
var last;
utils.addEvent(document.getElementById("filter1"), 'keyup', function(event) {
last = event.timeStamp;
setTimeout(function() {
if (last - event.timeStamp == 0)
//如果时间差为0（也就是你停止输入0.5s之内都没有其它的keyup事件发生）则做你想要做的事
{
//做你要做的事情
console.log('处理事件了....')
}
}, 500)
})