js高级程序设计笔记9--表单

2024-04-27 15:09:21

字体：大中小

来源：转载

供稿：网友

表单的基本知识

表单对应的是HTMLFormElement类型。有他自己独有的属性和方法。

acceptCharset:服务器能够处理的字符集。 action:请求的URL elements:表单中所有控件的集合。 length:表单中控件的数量。 method:HTTP请求类型。 name:表单的名称。 reset():将所有表单重置为默认值。 submit():提交表单。 target:用于发送请求和接收响应的窗口的名称。

提交表单

三种提交方式

<input type="submit" value="submit form"><button type="submit">submit form</button><input type="image" src="graphic.gif">

在js中，调用form的submit()方法也可以提交表单。

重置表单

<input type="reset" value="reset form"><button type="reset">reset form</button>

重置表单会使所有表单字段恢复到页面刚加载完毕时的初始值。在js中也可以调用form的reset()方法重置表单。

表单字段

1.共有的表单字段属性除了元素之外。所有表单字段都拥有相同的一组属性。

disabled:当前字段是否被禁用。 form:指向当前字段所属表单的指针，只读。 name：当前字段的名称。 readOnly:表示当前字段是否只读。 tabIndex:表示当前字段的切换（tab)序号。 value:当前字段将被提交给服务器的值。对于文件字段来说，这个属性是只读的。包含着文件在计算机中的路径。

防止表单重复提交：最常见的解决方案就是在第一次单击后禁用提交按钮。只要侦听submit事件，并在该事件发生时禁用提交按钮即可。

EventUtil.addHanler(form,"submit",function(event){ event = EventUtil.getEvent(event); var target = EventUtil.getTarget(event); var btn = target.elements["submit-btn"]; btn.disabled = true;})

注意不能通过onclick事件处理程序来实现这个功能。因为不同浏览器之间存在“时差”，有的浏览器会在触发表单的submit事件之前触发click事件（意味着提交发生之前禁用按钮导致永远都不会提交表单）。有的则相反。 2. 共有的表单字段方法 focus():得到焦点，激活表单字段。 blur():失去焦点。 HTML5为表单字段新增了一个autonfocus属性。自动把焦点移到相应字段。

<input type="text" autofocus>共有的表单字段事件 blur: change:对于和元素，在他们失去焦点且value值改变时触发。对于元素，在其选项改变时触发。 focus:

文本框脚本

//能够显示25个字符，但输入不能超过50个字符<input type="text" size="25" maxlength="50" value="initial value">//字符行数为25，字符列数为5，初始值必须在<textarea>之间，不能给<textarea>指定最大字符数<textarea rows="25" cols="5">initial value</textarea>选择文本：这两种文本框都支持select()方法，用于选择文本框中的所有文本。 select事件：在选择了文本框的文本时（即使只有一个字母）就会触发select事件。取得选择的文本：HTML5通过两个属性：selectionStart和selectionEnd。（即文本选取开头和结尾的偏移量).function getSelectedText(textbox){ return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);}

IE8及之前不支持这两个属性。它有个document.selection对象，其中保存着用户在整个文档范围内选择的文本信息。

if(document.selection){ return document.selection.createRange().text;}选择部分文本所有文本框都有一个setSelectionRange()方法，接收两个参数：要选择的第一个字符的索引和最后一个字符的索引。 IE8及其更早版本使用范围选择部分文本。function selectText(textbox,startIndex,stopIndex){ if(textbox.setSelectionRange){ textbox.setSelectionRange（startIndex,stopIndex); }else if(textbox.createTextRange){ var range = extbox.createTextRange(); range.collapse(true); range.moveStart("character",startIndex); range.moveEnd("character",stopIndex-startIndex); range.select(); } textbox.focus();}

过滤输入

屏蔽字符响应文本框中插入字符操作的是keyPRess事件。因此可以通过阻止这个事件的默认行为来屏蔽此类字符。但有些浏览器也会对其它键触发此事件。Firefox和Sarari(3.1版本之前)会对上键，下键，退格键和删除键触发keypress事件。在firefox中，所有由非字符键触发的keypress事件对应的字符编码为0，safari对应的字符编码为8.还要确保用户没有按下Ctrl键（复制粘贴需要）例子：只允许输入数字EventUtil.addHandler(textbox,"keypress",function(event)){ event = EventUtil.getEvent(event); var target = EventUtil.getTartget(event); var charCode = EventUtil.getCharCode(event); if(!//d/.text(String.fromCharCode(charCode)) && charCode>9 && !event.ctrlKey){ EventUtil.preventDefault(event); }}

操作剪贴板剪贴板事件：

beforecopy: copy:在复制时触发 beforecut: cut:在发生剪切时触发 beforepaste: paste:在发生粘贴时触发。这些事件及相关对象会因浏览器而异。要访问剪贴板的数据可以使用clipboardData对象。在IE中这个对象是window对象的属性。而在firefox,safari,Chrome中是event对象的属性，但是只有在处理剪贴板事件期间此对象才有效，这是为了防止度剪贴板的未授权访问。这个对象有三个方法： getData():从剪贴板中取得数据。接受一个参数：要取得数据的格式。IE有两种数据格式“text”和”URL”.在其它浏览器是一种MIME类型。返回布尔值。 setData():接收两个参数。第一个是数据类型。第二个是放在剪贴板中的文本。返回布尔值。 clearData():清楚数据。

选择框脚本

HTMLSelectElement类型提供了下列属性和方法。

add(newOption,relOption):向控件中插入元素，在relOption之前。 multiple:布尔值，表示是否多项选择。 options:控件中所有元素的HTMLCollection。 remove(index):移除给定位置的选项。 selectedIndex:基于0的选中项的索引。 size:选择框中可见的行数。

每个元素都有一个HTMLOptionElement对象表示。此对象有如下属性。

index:当前选项在options集合中的索引。 label:当前选项的标签。 selected:表示当前选项是否被选中。 text:当前选项的文本。 value:选项的值。

添加选项

//使用DOM方式var newOption = document.createElement("option");newOption.appendChild(document.createTextNode("option text"));newOption.setAttribute("value","option value");selectbox.appendChild(newOption);//使用OPtion构造函数var newOption = new Option("option text","option value");selectbox.appendChild(newOption);//selectbox.add(newOption,undefined);

上一篇：Bootstrap学习笔记（五）菜单、按钮及导航

下一篇：vue2.0+bootstrap制作购物车及地址选择页原型