Pro JavaScript (10)

January 17, 2006 at 3:58 pm | Posted in JavaScript | Leave a comment

Pro JavaScript (10) 表单(form)与数据集成

—————————————————————————————————————————

使用传统的Form元素(<form/><input/><select/><text/>是向server传送数据的最基本的办法。JavaScript可以强化这方面的功能。

基础回顾

HTML form 的属性

  • method request的类型,GET还是POST

  • action : 该form summit的目标URL

  • enctype : 发送的数据将在Server端的解码方式,默认为application/x-www-url-encoded如果该form为上传文件则为multipart/form-data

  • accept : 使用逗号分隔的MIME类型,如text/html”image/*”等。用来表示server可以正确处理的文件类型,常见的是加在<input type=File>标签中,这在RFC1867中本来作为文件类型的过滤器来用的。但是,需要注意的是,实际的browser实现中,对于文件类型是不进行过滤的,是无法阻止用户submit一个不合法的文件,所以要么在clinet端使用Javascript进行处理,要么在server端进行判断处理。
    (参考:File input (or "upload") in HTML forms

  • accept-charset:用来表示server可以接受的输入数据的字符集的列表,也就是说,server根据这里定义的字符集来处理表单。

一个form可以包含任意数目的输入元素:(<input/>,<select/>,<textarea/>

<input/>的属性:

  • text 单行文本框,注意:size指可见字符数,maxlength指最大字符数

  • radio 单选框,具有相同name的一组radio,当选择其中的一个则其他的checked属性自动为false

  • checkbox 对勾,通过checked属性为true/false来判断是否选中。

  • file 文件上载

  • password 密码

  • button 按钮,用来引起一个自定义的时间

  • submit 提交,专门用以引起提交事件的button

  • reset 重置(所有form中的field都变为默认值)

  • hidden 隐藏

  • image 并用来作为submit使用的image

<select/> 与子标签<option>的连用

<textarea/> 多行文本框,大小由rowscols决定。


注意:id vs. name 当使用labelinput连用时,需要注意inputname属性和id属性是都需要的,form只提交具有name属性的input,而label标签中for的值是id,所以这时,最好的办法是idname都置为同名。参考:http://www.quirksmode.org/oddsandends/forms.html

不太精确的说,可以这样理解,Server端使用name,如servletrequest.getParameterClient端使用的是Id,如DOMgetElementById

—————————————————————————————————————————

得到Form对象

多种办法:

Form中的每个field可以通过oForm.elements[index]oForm.elements[“name”],或者直接使用oForm.elements.name当然也可以随时使用document.getElementById()。每个field的通用属性/方法主要有:disabled(阻止使用),form(指向包含该fieldform),blur()(失去焦点),focus()(得到焦点)。

使第一个field获得焦点

粗略的解决方法:document.forms[0].elements[0].focus(); 缺点是如果第一个field是隐藏的话,就会发生错误。

使用工具类:

Form的提交

HTML语言中,提交一个标单有两种方法,1,使用submit button2,使用可以代替submit button使用的图片。

通过DOM中定义的方法form.submit()也可以提交表单。

注意:submit事件和onsubmit event handler,当使用上述两者Button是,在按下按键后,会激发submit事件,这时如果定义了onsubmit handler则,会先执行handler,这通常被用来进行form数据的验证,如同不过验证可以使用preventDefault()来阻止提交,如通过,则执行submit(),把数据发送到server端,但是如果直接调用form.submit()方法,则不会激发submit事件。而直接把数据发送到server端。

选择文本框中的文本

两种文本框(<input type=”text”/><textarea/>)都支持select(),该方法会选定文本框中的所有文本,注意,安全起见,在执行select()前,先执行focus()

自动根据文本长度移动焦点:(输入序列号等)

使用keyup事件(onkeyup="FormUtil.tabForward(this)"),并判断是否到达inputmaxlength,如到达则把焦点转移到下一个文本框。:

限制<textarea/>的输入字符数

<textarea>本身没有maxlength属性,但是我们可以硬加入一个maxlength,然后通过getArribute(“maxlength”)来实现判断。

然后通过设置onkeypress属性为true还是false来控制是否让用户输入。

如上述的<textarea>就只能输入25个字符。这里之所以不使用标准event模型中的preventDefault()是因为Mozilla对于onkeypress的实现有问题,而使用置true/false值的方法对于所有浏览器都是适用的。

阻止不正确的输入类型:(例如要求文本输入数字)

與限制輸入字符數類似,我們需要自造一對invaliedchars/valiedchars屬性,然後通過控制onkeypress handler的返回值来阻止不正确的输入,同时还需要考虑粘贴的问题(ctrl+v键和鼠标右键后出现的选择菜单)对于IE,可以直接设置:onpaste=”return false”,而对于则需要设置:oncontextmenu=”return false”,然后就是解决Ctrl+V的问题,这可以在onkeypress例程里边通过oEvent.ctrlKey && sChar==”v”来判断。

只能输入数字:

相应的allowChars方法:

注意,该程序在FireFox1.5无法使用Backspaceshief键。而在IE中正常,修改代码为:

使用了keyCode==8这种ugly的办法,有更好的办法吗?

当你想让文本框具有粘贴的功能,但是又要限制输入字符的情况,则可以利用onblur,也就是在文本框失去焦点时进行判断,方法与前面的介绍的类似。只所以使用onblur而不用onchange是因为onchange只在文档发生变化是激发事件,也就是说,如果粘贴入非法字符,则移动焦点时会激发一次,因为文档发生了变化,而如果不做任何修改,再次转移焦点,这时由于没有任何修改,则onchange不会触发事件,所以判断程序不会调用。

利用同样的办法,可以添加更多的功能,如使用上下箭头时数字增加或减小(keyCode==38 / keyCode==40

—————————————————————————————————————————

<Select/> <option/>

html语言中(出去input中的radiocheckbox外),选择框通过<select/>表示,注意size属性表示每次显示的选项个数,mutiple=”mutlple”允许多选;对于select中包含的option,可以直接使用options[]访问,如oListbox.option[1].text (当然也可以同普适的DOM方法firstChild.nodeValue; oListbox.option[1].value 得到select中第一个option的显示的文本和该选项的值。同时optionindex属性会指示该option在组中的位置,如oListbox.option[1].index 1, 注意oListbox.selectedIndex指示选择的optionindex,但是对于多选的情况,它包含的值是第一个被选择的option,这时候,需要自己想办法解决,还好,对于每个option具有属性selected,可以根据该值true/false来判断。

灵活的使用DOM中的方法可以进行option的增加,删除,移动,和改变顺序:

  • 增加option(利用appendChild):

  • 删除option

  • 移动option:(注意,对于DOM来说,如果appendChild的参数中提供的节点在文档中原来就存在的话,会从原来的位置删除,然后插入到appendChild的那一点,这给Move带来了很大的方便)。

  • 改变顺序:

上移:oListbox.insertBefore(oOption, oPrevOption);

下移:oListbox.insertBefore(oNextOption, oOption);


Advertisements

Leave a Comment »

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create a free website or blog at WordPress.com.
Entries and comments feeds.

%d bloggers like this: