zoukankan      html  css  js  c++  java
  • js014-表单脚本

    js014-表单脚本

    本章内容:
    理解表单

    文本框验证与交互

    使用其他表单控制

    14.1 表单的基础知识

    在HTML中,表单时由<form>元素来表示的,在JS中,表单对应的时HTMLFormElement类型。HTMLFormElement继承了HTMLElement,所以它与其他HTML元素具有想的的默认属性。它还有自己独特的属性和方法:

    属性/方法

    说明

    acceptCharset

    服务器能够处理的字符集;等价于HTML的accept-cahrset特性

    action

    接受请求的URL;等价于HTML的action特性

    elements

    表单中所有控件的集合(HTMLCollection)

    enctype

    请求的编码类型;等价于HTML的enctype特性

    length

    表单中控件的数量

    method

    要发送的HTTP类型,通常时“get”或“set”;等价于HTML的method特性

    name

    表单的名称;等价于HTML的name特性

    reset()

    将所有表单域重置为默认值

    submit()

    提交表单

    target

    用于发送请求和接收相应的窗口名称等价于HTML的target特性

    取得<form>元素引用的方式有很多,最常用的是:getElementBId()

    var form = document.getElementBId("lal-Alice");  //取得<form>元素的引用

    14.1.1 提交表单

    用户单击提交按钮或图像按钮时,就会提交表单,使用<input>或<button>都可以定义提交表单。只要将type特性值设置为“submit”即可。图像按钮是将<input>的type值设为“image”来定义的。

    通用提交按钮

    <input type="submit" value="submit form"/>

    自定义提交按钮

    <button type="submit">submit form</button>

    图像提交按钮

    <input type="image" src="graphic.gif" />

    阻止提交表单

    var form = document.getElementById("myform");

    EventUtil.addHandler(form, "submit", function(event){

           //取得事件对象

           event = EventUtil.getEvent(event);

           //阻止默认事件

           EventUtil.preventDefault(event);

    });

    只要表单中有提交按钮,在相应表单空间拥有焦点的情况下,只要打回车键就可以提交表单(textarea是一个例外,在文本区中打回车会换行)。如果表单里没有提交按钮,回车不会提交表单。

    在JS中以编程方式调用submit()方法也可以提交表单,而且这种方式无需包含表单提交按钮,任何时候都可以提交表单。

    var form = document.getElementById("myform");

    //提交表单

    form.submit();

    14.1.2 重置表单

    type特性值为:reset的<input>或<button>都可以创建重置按钮。如下

    通用重置按钮

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

    自定义重置按钮

    <button type="reset">submit form</button>

    阻止表单重置

    var form = document.getElementById("myform");

    EventUtil.addHandler(form, "reset", function(event){

           //取得事件对象

           event = EventUtil.getEvent(event);

           //阻止默认事件

           EventUtil.preventDefault(event);

    });

    在JS中以编程方式调用reset()方法也可以提交表单,而且这种方式无需包含表单提交按钮,任何时候都可以提交表单。

    var form = document.getElementById("myform");

    //提交表单

    form.reset();

    14.1.3 表单字段

    每个表单都包含有elements属性,该属性是表单中所有表单元素的结合,这个elements集合是一个有序列表,其中包含着表单中的所有字段,例如<input>、<textarea>、<button>、<fieldset>。每个表单字段在elements集合中的顺序与他们出现在标记中的顺序相同,可以按照位置和name特性来访问它们。

    var form = document.getElementById("myform");

    //取得表单中的第一个字段

    var  field1 = form.elements[0];

    //取得名为textbox的字段

    var field2 = form.elements[textbox];

    //取得表单中包含的字段的数量

    var fieldCount = form.elements.length;

    1、共有的表单字段属性

    除了<fieldset>以外,所有的表单字段都拥有形同的一组属性。因为<input>类型可以表示多种表单字段,所以有些属性只适用于某些字段,但是还有一些是共用的。共用的表单字段属性如下:

    属性

    说明

    disabled

    布尔值,表示当前字段是否禁用

    form

    指向当前字段所属表单的指针,只读

    name

    当前字段的名称

    readOnly

    布尔值,表示当前字段是否只读

    tabIndex

    表示当前字段的切换(tab)序号

    type

    表示当前字段类型,如“checkbox”“radio”等

    value

    当前字段被提交个服务器的值。只读

    除form属性以外,可以通过JS修改其他任何属性

    除了<fieldset>以外,所有的表单字段都拥有type属性

    2、共有表单的字段方法

    每个表单字段都有两个方法:

    focus()

    用于将浏览器焦点设置到表单字段,,即激活表单字段,使其可以相应键盘事件

    blur()

    用于从元素中移走焦点

    3、共有的表单字段事件

    除了支持鼠标、键盘、更改和HTML事件之外,所有表单字段都支持下列3个事件:

    事件

    触发条件

    blur

    当前字段失去焦点时

    change

    对于<input><textarea>元素,在他们拾取焦点且value值发生改变时触发,对于<slelect>元素,在其改变选项是触发

    focus

    当前字段获得焦点时触发

    14.2 文本框脚本

    两种文本框:

    <input>

    单行文本框。type = “text”,size指定文本框中能够显示的字符数,value特性设置文本框初始值,maxlength特性指定文本框可以接收的最大字符数。如

    <input type="text" size="25" maxlength="50" value=" initial value "/>

    <textarea>

    多行文本框。rows和cols特性指定文本框的字符行数和列数(与input的size类似),初始值必须放在<textarea>和</textarea>之间

    如:

    <textarea rows="25" cols="5">initial value</textarea>

    不要使用setAttribute()设置<input>元素的value特性,也不要去修改<textarea>元素的第一个子节点。原因:对value属性修改,不一定会反映在DOM中,所以处理文本框时最好不要使用DOM 方法。

    14.2.1 选择文本

    以上两种文本都支持select()方法,该方法用于选择文本框中所有文本。不接受参数。可以在任何时候被调用。

    1、选择(select)事件

    在选择文本框是,就会触发select事件。在调用select()方法是也会触发select事件:

    var textbox = document.form[0].elements["textbox1"];

    EventUtil.addHandler(textbox, "slecte", function(event){

           var alert("text slected" + textbox.value);

    });

    2、取得选择的文本

    添加两个属性:selectionStart和selectionEnd。这两个属性中保存的是基于0的数值,表示文本的范围(开头和结尾的偏移量)

    function getSelectedTxet(textbox){

           return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd)

    }

    3、选择部分文本

    setSelectionRange()方法。除了select()方法之外,所有的文本框都有一个setSelectionRange()方法,接收两个参数:选择第一个字符的索引和要选择的

    一个祖父之后的字符的索引。

    textbox.value = "Hello word !";

    //选择所有文本

    textbox.setSelectionRange(0, textbox.value.length);//"Hello word !"

    //选择前3个字符

    textbox.setSelectionRange(0, 3);//"Hel"

    //选择第4到第6个字符

    textbox.setSelectionRange(4, 6);//"o w"

    14.2.2 过滤输入

    1、屏蔽字符

    通过代码屏蔽所有按键操作

    EventUtil.addHandler(textbox, "keypress",function(event){

           event = EventUtil.getEvent(event);

           EventUtil.preventDefault(event);

    });

    以下代码只允许用户输入数值:

    EventUtil.addHandler(textbox, "keypress",function(event){

           event = EventUtil.getEvent(event);

           var targe = EventUtil.getTarget(event);

           var cahrCode = EventUtil.getCharCode(cahrCode);

           if (!/d/.text(String.formCharCode(cahrCode))) {

                  EventUtil.preventDefault(event);

           };   

    });

    2、操作剪贴板

    以下为6个剪贴板事件:

    事件

    触发场景

    boforecopy

    在发生复制操作前触发

    copy

    在发生复制操作时触发

    beforecut

    在发生剪切操作前触发

    cut

    在发生剪切操作时触发

    beforepaste

    在发生黏贴操作前触发

    paste

    在发生黏贴操作时触发

    14.2.3 自动切换焦点

    //自动切换焦点

    (function(){

           function tabForwafd(event){

                  event = EventUtil.getEvent(event);

                  var target = EventUtil.getTarget(event);

                  if (target.value.length == target.maxLength) {

                         var form = target.form;

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

                                if (form.elements[i+1]) {

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

                                }

                                return;

                         }

                  }

           }

           var textbox1 = document.getElementById("texttel1");

           var textbox2 = document.getElementById("texttel2");

           var textbox3 = document.getElementById("texttel3");

           EventUtil.addHandler(textbox1, "keyup", tabForwafd);

           EventUtil.addHandler(textbox2, "keyup", tabForwafd);

           EventUtil.addHandler(textbox3, "keyup", tabForwafd);

    })

    14.2.4 HTML5约束验证API

    1、必填字段

    指定required属性

    <input type="submit" value="submit form" required/>

    2、其他输入类型

    <input type="email" name="email" />

    <input type="url" name="homepage" />

    3、数值范围

    <input type="nember" min="0" max="100" step="5" name="count" />

    4、输入模式

    新增了pattern属性,该属性是一个正则表达式,用于匹配文本框中的值

    <input type="text" pattern="d+" name="count" />

    5、检测有效性

    checkValidity()方法可以检测表单中某个字段是否有效。

    6、禁用验证

    通过设置novalidate属性可以告诉表单不进行验证。

     原文地址:http://www.cnblogs.com/lal-fighting/p/5158876.html

  • 相关阅读:
    mina:IoBuffer 常用方法(转载)
    js:对象之间的复制
    jquery与angular的交互
    javax.crypto.BadPaddingException: Given final block not properly padded
    jstree:重新加载数据集,刷新树
    TCP 握手 -> 微服务
    eclipse 中添加source
    02 IO
    为什么常用 Map<> map = new HashMap()
    自组织 Self-Orginaztion
  • 原文地址:https://www.cnblogs.com/lal-fighting/p/5158876.html
Copyright © 2011-2022 走看看