JS经典实例网站首页 JS经典实例

javascript学习笔记-表单处理

发布时间：2018-04-05 18:16:32编辑：雪饮阅读（）

获取form

var fm=document.forms[0];

alert(fm);

通过name获取form

var fm=document.forms['xy'];

alert(fm);

通过name直接获取form

var fm=document.xy;

alert(fm);

关于submit事件

Submit事件是在form上的，不在submit按钮上，最后真正执行的是form上，所以要阻止submit按钮的默认事件或监听submit事件，必须通过form而不是submit按钮。

如果非要监听submit按钮给其加上一些执行脚本，则可以通过他的click事件

实现ctrl+enter提交

var fm=document.xy;

window.addEventListener('keydown',function(evt){

if(evt.ctrlKey && evt.keyCode==13) fm.submit()

},false);

非按钮实现表单重置

var fm=document.xy;

var sub=document.getElementById("sub");

sub.addEventListener('click',function(evt){

fm.reset();

},false);

表单控件的一些属性获取或修改

<!doctype html>

<html>

<head>

<title>雪饮个人博客</title>

window.onload=function(){

var fm=document.xy;

//获取表单控件集合

//alert(fm.elements);

//获取表单控件个数

//alert(fm.length);

//获取表单控件个数

//alert(fm.elements.length);

//获取表单控件

//alert(fm[0].name);

//获取表单控件

//alert(fm.elements[0].name);

//获取表单控件

//alert(fm.elements['xyy'].nodeName);

//获取表单控件(集合)

//alert(fm.elements['xylist']);

//获取表单元素从属的表单对象

//alert(fm.elements['xylist'][0].form);

//获取表单控件的类型

//alert(fm.elements['xylist'][0].type);

//修改表单控件的类型

//fm.elements['xylist'][0].type="checkbox";

}

</script>

</head>

<body>

</form>

</body>

</html>

表单控件的失焦与聚焦方法

var fm=document.xy;

//表单元素聚焦方法

//fm.elements[0].focus();

//表单元素失焦方法

//fm.elements[0].blur();

表单控件的onchange事件

对于<input>和<textarea>元素，在改变 value 并失去焦点时

触发；对于<select>元素，在改变选项时触发

Onchange与onblur的执行顺序，当这两个事件冲突时，先执行onchange后执行onblur

var fm=document.xy;

fm.elements[0].onchange=function(){

alert("change");

};

fm.elements[0].onblur=function(){

alert("blur");

}

获取表单控件的默认值

var t=document.getElementById("t");

bt.onclick=function(){

alert(t.defaultValue);

}

选定输入框文本

var xk=document.getElementById("xk");

xk.select();

选定输入框文本(部分)

Ie效果明显

var xk=document.getElementById("xk");

//从n个到m个

xk.setSelectionRange(0,1);

谷歌上要在选定后还要加上聚焦效果才看得见

xk.focus();

使用ie的文本范围概念选定输入框的文本

var xk=document.getElementById("xk");

//创建文本范围对象range

var range=xk.createTextRange();

//将文本指针移动到开头

range.collapse(true);

//从n个选择m个

range.moveStart('character',0);

range.moveEnd('character',1);

//选择结束

range.select();

文本选择事件的监听

var xk=document.getElementById("xk");

xk.addEventListener("select",function(){

alert("你选择了文本,该表单控件的全部文本:"+this.value);

},false);

获取所选择部分的文本

var xk=document.getElementById("xk");

xk.addEventListener("select",function(){

var start=this.selectionStart;

var end=this.selectionEnd;

var selectText=this.value.substring(start,end);

alert("你选择了文本:"+selectText);

},false);

禁用非数字键输入(遇到中文输入法会失效)

var xk=document.getElementById("xk");

xk.addEventListener("keypress",function(evt){

var charCode=evt.keyCode;

var charStr=String.fromCharCode(charCode);

if(!/\d/.test(charStr)){

evt.preventDefault();

}

},false);

监听拷贝事件

拷贝事件会连续触发beforecopy和copy两个事件，并且beforecopy这个将会在copy前先触发

var xk=document.getElementById("xk");

xk.addEventListener("copy",function(evt){

alert("复制时");

},false);

xk.addEventListener("beforecopy",function(evt){

alert("复制前");

},false);

禁用复制、粘帖、裁剪

window.onload=function(){

var xk=document.getElementById("xk");

xk.addEventListener("cut",function(evt){

evt.preventDefault();

},false);

xk.addEventListener("copy",function(evt){

evt.preventDefault();

},false);

xk.addEventListener("paste",function(evt){

evt.preventDefault();

},false);

}

Ie与火狐支持通过css样式禁用中文输入法

或

var xk=document.getElementById("xk");

xk.style.imeMode = 'disabled';

禁用中文输入

var xk=document.getElementById("xk");

xk.addEventListener("keyup",function(evt){

this.value=this.value.replace(/[^\d]/g,'');

},false);

自动聚焦的实现

window.onload=function(){

var fm=document.getElementById("xy");

fm.elements["xk1"].addEventListener('keyup',tabForWard,false);

fm.elements["xk2"].addEventListener('keyup',tabForWard,false);

fm.elements["xk3"].addEventListener('keyup',tabForWard,false);

function tabForWard(evt){

if(this.value.length==this.getAttribute("maxlength")){

for(var i=0;i<fm.elements.length;i++){

if(fm.elements[i]==this){

fm.elements[i+1].focus();

return;

}

</script>

</form>

Select标签的multiple与size属性

Multiple属性可使得select标签可以多选，而不是默认的单选

Size属性规定了select中可见的option，若该值小于实际option数，则只显示size个option，其它的需要通过拉动滚动条才能可见。反之，若size值大于option数，则会在最后一个option后面留下空白行。

</select>

通过javascript也可以操作这两个属性

var fm=document.getElementById("xy");

var city=fm.elements["city"];

city.multiple=true;

city.size=1;

select的一些常规操作

var fm=document.getElementById("xy");

var city=fm.elements["city"];

//获取select类型(单行还是多行，即是否多选)

//alert(city.type);

//获取option的文本节点值

//alert(city.options[0].text);

//获取option的文本节点值(标准dom)

//alert(city.options[0].firstChild.nodeValue);

//使得指定索引的option被选定

//city.options[2].selected=true;

//使得指定索引的option被选定

//city.selectedIndex=3;

//select新增option

//var option=new Option('text节点值','value值');

//普通新增

//city.appendChild(option);

//指定插入位置新增

//city.add(option,0);

//若不指定第二个参数或第二个参数为null、undefined，则和普通新增一样

//city.add(option);

//city.add(option,null);

//city.add(option,undefined);

//select删除option

//这里可以每次只删除索引0的，也可以指定删除某个

//若你要删除全部的，则可以在循环中每次删除索引0的，因为每删除一个就会自动将下一个option顶替到0的位置

//city.remove(0);

//select删除option(置null)

city.options[0]=null;

select中option移动到其它option

如果一个select中的option被另外一个select添加，则会自动解除与之前select的关系

window.onload=function(){

var fm=document.getElementById("xy");

var city=fm.elements["city"];

var city2=fm.elements["city2"];

city.addEventListener("click",function(){

city2.appendChild(this.options[this.selectedIndex]);

},false);

}

</script>

</select>

</select>

</form>

同一个select内部option的位置移动(排序)

window.onload=function(){

var fm=document.getElementById("xy");

var city=fm.elements["city"];

//获取options的索引

//alert(city.options[0].index);

var option1=city.options[1];

city.insertBefore(option1,city.options[option1.index-1]);

}

</script>

</select>

</form>

关键字词：javascript,表单

上一篇：javascript学习笔记-事件绑定及深入

下一篇：javascript学习笔记-错误处理(抛出与捕获)与调试(try,catch)

您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例

javascript学习笔记-表单处理

相关文章

您当前的位置：首页 > 学无止境 > JS经典实例网站首页 JS经典实例