9. Javascript学习笔记——表单处理

前端开发 作者: 2024-08-26 01:10:01
9. 表单处理 9.1 表单的基础知识 9.2 文本框脚本 9.3 选择框脚本 9.4 操作富文本

9. 表单处理

///表单用 <form> 元素表示,对应的是 HTMLFormElement 类型,继承自 HTMLElement。
//属性:action、method、acceptCharset

///【获取表单】
var form = document.getElementById('form1');//通过给<from>标签添加ID
var from2 = document.froms['form_name'];//通过<form>的name属性获得


///【提交表单】
//浏览器将请求发送给服务器之前会触发 submit事件 ,这样就可以验证是否能提交
//注意 提交按钮的onsubmit无效
var form = document.forms['form'];
form.addEventListener('submit',function(event){
    if(form.childern[0].getAttribute('value')<10){
        alert('small');
        event.preventDefault();
    }
},false)

form.submit(); //提交表单,不会触发 onsubmit 事件
form.reset(); //重置表单,会触发 onreset 事件



///【表单字段】
//访问表单字段
form.elements;//elements时所有表单元素的集合,非表单元素(p,a,div等)不在里面
form.elements[0];//取得表单的第一个字段
form.elements['user'];//取得name 为 user的字段。如果多个表单空间使用一个name(如单选按钮),那么就返回一个NodeList

//共有的表单字段属性
//type value disable(布尔值) readOnly(布尔值)  等等

//共有的表单字段方法
form.elements[0].focus();//让表单的某个元素获得焦点
form.elements[0].blur();//让表单的某个元素失去焦点

//共有的表单字段事件
//onblur失去焦点触发   onchange内容发生改变时触发   onfocus获得焦点触发
//不要使用setAttribute() 和 getAttribute() 修改和获得文本框的值,因为获取不到,不要用标准DOM
form.elements[0].value='xxx';//使用这种方式修改

///【选择文本】
form.elements[0].select();//选中文本框的所有文本

///选择(select)事件
//当选择了文本,并且释放了鼠标,才会触发select事件,select()方法也会触发select()事件

//取得所选择的文本
//两个属性(属于文本框对象)表示选择文本的开头和结尾的偏移量:selectionStart selectionEnd
form.elements[0].onselect = function(){
    alert(this.value.substring(this.selectionStart,this.selectionEnd));
}

//选择部分文本
//参数形式和substring一样,不包括end
form.elements[0].setSelectionRange(start,end);//



///【操作剪贴板】
/* 【事件】
oncopy  在复制操作发生时触发
oncut   在剪切操作发生时触发
onpaste 在粘贴操作发生时触发
*/
//屏蔽字符
form.elements[0].onkeypress = function(e){
    if(!/\d/.test(String.fromCharCode(e.charCode))){//使之只能输入数字,不过还可以粘贴
        e.preventDefault();
    }
}
form.elements[0].onpaste = function(e){
    alert('禁止粘贴');
    e.preventDefault();
}

//【操作剪贴板数据】
//安全起见,浏览器只允许在发生对应的剪贴板事件时,才可以操作剪贴板数据
//通过 clipbroadData 对象访问:getData('MIME')、setData('MIME','data')、clearData()
document.onpaste = function(event){
    	event.getData('text/plain') //粘贴只能getData(),复制只能setData()
}
  //待学习


  //待学习

原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_68698.html