$14 表单脚本

1. 表单基础知识:

在HTML中,表单由<form>表示;
在JS中,表单由HTMLFormElement类型表示,它继承了HTMLElement。
取得页面中的表单:

var form=document.forms;
Paste_Image.png

1.1 提交表单

只要将button或者input标签的type设置为submit即可提交表单。
浏览器在将请求发送给服务器之前会首先触发submit事件,这样我们可以根据用户输入的内容决定是否发送这个表单。

1.2 重置表单

html中:将其type设置为"reset"
JS中:

var form=document.forms[0];
form.reset();

1.3 表单字段

可以通过elements属性访问表单中的字段。

<form>
       <button type="submit" id="button">按钮1</button>
       <input type="submit" value="submit"/>
</form>
 var form=document.forms[0];
 var button=form.elements[0];
 var input=form.elements[1];

也可以根据name值访问:

form.elements["button"]==button//true
A. 共有的表单属性:
1. disabled:布尔值,表示是否被禁用。
2. form:指向当前的表单
3. name:当前字段的名称
4. readOnly:当前字段是否为只读
5. type:当前字段的类型:如radio  checkbox等
6. value:当前字段被提交给服务器的值。

上述属性除了form外,都可以通过JS进行修改:
如:在一次单击后禁用按钮,以防止用户多次点击:

EventUtil.addHandler(button,"click",function (event) {
           alert("a");
           button.disabled=true;
        });
B. 共有的表单字段方法

focus()和blur()
focus()方法将浏览器的焦点设置到表单字段。
JS方法:

var input=form.elements[1];
input.focus();

html方法:利用autofocus属性

<input type="text" autofocus>
Paste_Image.png

blur()与focus()相反,它为移走焦点。

C. 共有的表单字段事件
1. blur:当前字段失去焦点触发
2. focus:当前字段获得焦点触发
3. change:对于input和textarea元素,失去焦点并且value值改变时触发。对于select元素,选项改变时触发。
var text=form.elements[2];//textarea元素
    EventUtil.addHandler(text,"focus",function (event) {//聚焦后将背景颜色设置为黄色
        event=EventUtil.getEvent(event);
        var target=EventUtil.getTarget(event);
        target.style.backgroundColor="yellow";
    });
    EventUtil.addHandler(text,"blur",function (event) {//失焦后如果里面的值为数字则无颜色,否则为红色
        event=EventUtil.getEvent(event);
        var target=EventUtil.getTarget(event);
        if(/[^\d]/.test(target.value)){
            target.style.backgroundColor="red";
        }else {
            target.style.backgroundColor=" ";
        }
    });
    EventUtil.addHandler(text,"change",function (event) {//里面的值改变时如果为数字则无颜色,否则为红色
        event=EventUtil.getEvent(event);
        var target=EventUtil.getTarget(event);
        if(/[^\d]/.test(target.value)){
            target.style.backgroundColor="red";
        }else{
            target.style.backgroundColor="";
        }
    })

2. 文本框脚本

表示文本框的元素:
input textarea
区别:
input:
单行文本
可以设置显示的字符数size和最大的接收字符数maxlength

<input type="text" size="10" maxlength="12">

textarea:
多行文本
可以通过cols和rows设置列和行数。

<textarea cols="5" rows="5">12345</textarea>

改变值:
在改变值时,都可以使用element.value=""设置。

2.1 选择文本

选中所有文本:select()方法

EventUtil.addHandler(text,"focus",function (event) {//鼠标聚焦时选中所有文本
        event=EventUtil.getEvent(event);
        var target=EventUtil.getTarget(event);
        target.select();
    });
Paste_Image.png
A. select事件:

当文本被选中时触发:

EventUtil.addHandler(text,"select",function (event) {
     console.log(text.value);
});
B. 获取被选中的文本:

select有两个属性:selectionStart和selectionEnd保存的选中文本的偏移量

EventUtil.addHandler(text,"select",function (event) {      
    console.log(text.value.substring(text.selectionStart,text.selectionEnd));
});
C. 选择部分文本:setSelectionRange
text.focus();//使用该方法之前或者之后需要将焦点设置到文本框。
text.setSelectionRange(2,3);
Paste_Image.png

2.2 过滤输入:

利用事件和DOM手段,将文本框变为可以理解用户输入数据的功能性控件。
A. 屏蔽字符:

如用户只能输入数字:

EventUtil.addHandler(text,"keypress",function (event) {
     event=EventUtil.getEvent(event);
     var target=EventUtil.getTarget(event);
     var charCode=EventUtil.getCharCode(event);
     if(!/\d/.test(String.fromCharCode(charCode))&&charCode>9&&!event.ctrlKey){//后面两个条件为取消一些退格等功能键以及复制粘贴用的ctrl键
            EventUtil.preventDefault(event);
        }
})
B. 操作剪贴板:

剪贴板事件:

beforecopy:复制操作前触发。
copy:复制操作时触发。
beforecut:剪切操作前触发。
cut:剪切操作时触发。
beforepaste:粘贴前触发
paste:粘贴时触发。

如何访问剪贴板中的数据:
clipboardData对象。该对象三个方法:getData() setData() clearData()
在EventUtil对象中加入方法:

    getClipboardText:function (event) {
                var clipboardData=(event.clipboardData || window.clipboardData);
                return clipboardData.getData("text");
            },
     setClipboardText:function (event,value) {
                if(event.clipboardData){
                    return event.clipboardData.setData("text/plain",value);
                }else if(window.clipboardData){
                    return window.clipboardData.setData("text",value);
                }
            }

例子:如果是数值,则粘贴,否则,不粘贴。

    EventUtil.addHandler(textArea,"paste",function (event) {
       event=EventUtil.getEvent(event);
       var text=EventUtil.getClipboardText(event);
       if(!/^\d*$/.test(text)){
           EventUtil.preventDefault(event);
       }
   })

2.3 . 自动切换焦点

当文本框中达到最大输入字符数量时,自动切换到下一个文本框。

        <input type="text" name="tel1" id="textTel1" maxlength="3">
        <input type="text" name="tel2" id="textTel2" maxlength="3">
        <input type="text" name="tel3" id="textTel3" maxlength="4">
     function tabForward(event) {
        event=EventUtil.getEvent(event);
        var target=EventUtil.getTarget(event);
        if(target.value.length==target.maxLength){
            var form=target.form;//切换到当前目标所在的表单
            for(var i=0;i<form.elements.length;i++){//对该表单内的元素进行循环
                if(form.elements[i]==target){//找到当前事件的元素
                    if(form.elements[i+1]) {//如果存在下一个元素,则将下一个元素获得焦点。
                        form.elements[i+1].focus();
                    }
                    return;//如果不存在就停止
                }
            }
        }
    }
    var text1=document.getElementById("textTel1");
    var text2=document.getElementById("textTel2");
    var text3=document.getElementById("textTel3");
    EventUtil.addHandler(text1,"keyup",tabForward);
    EventUtil.addHandler(text2,"keyup",tabForward);
    EventUtil.addHandler(text3,"keyup",tabForward);

2.4 HTML5约束验证API

HTML5帮助对表单进行验证。

A. 必填字段:required
<input type="text" maxlength="3" required>
<input type="text"  maxlength="3">
<input type="text"  maxlength="4">
<button type="submit">提交</button>
Paste_Image.png
B. 其他输入类型:

其他的type类型:如"url" "email"

<input type="email" required>
<input type="text"  >
<input type="text"  >
<button type="submit">提交</button>
Paste_Image.png
C. 数值范围

type值还有"number" "range" "datatime"等等。下面的例子为输入0-50中的3的倍数。

<input type="number" min="0" max="50" step="3">
<input type="text">
<input type="text">
<button type="submit">提交</button>
Paste_Image.png
D. 输入模式:pattern

利用正则进行匹配

<input type="text" >
<input type="text" pattern="\d+">
<input type="text"  >
<button type="submit">提交</button>
Paste_Image.png
E. 检测有效性

如何检测表单是否有效:checkValidity()方法,返回布尔值。

        var button=document.getElementsByTagName("button")[0];
        EventUtil.addHandler(button,"click",function (event) {
            if(document.forms[0].checkValidity()){
                //表单有效
            }else{
                console.log("表单无效")
            }
        })

还有一个属性:validity可以有更详细的信息显示表单字段的有效性。

F. 禁用验证:

novalidate属性:表单不需要验证。
HTML方法:

    <form novalidate>
    </form>

JS方法:

    document.forms[0].novalidate=true;

formnovalidate属性:作用于某个按钮,当点击该按钮时不验证表单。
HTML方法:

    <form novalidate>
        <input type="text" >
        <input type="text" pattern="\d+">
        <input type="text"  >
        <button type="submit" formnovalidate>提交</button>
    </form>

JS方法:

    document.getElementsByTagName("button")[0].formNoValidate=true;

3. 选择框脚本

选择框通过select和option标签组成。

    <form>
        <select name="location" id="selLocation">
            <option value="select1">北京</option>
            <option value="select2">上海</option>
            <option value="select3">山东</option>
        </select>
    </form>
HTMLSelectElement类型提供了下列的属性和方法:

add(newOption,relOption):在relOption之前插入newOption
options:返回所有的option的HTMLCollection
remove(index):移除给定选项
selectIndex:选中项索引
size:选择框可见行数。

每个option都有下列属性:

index
label
selected:布尔值
text:如上例中的“北京”
value:value值
var selectBox=document.forms[0].elements["location"];
console.log(selectBox.options[0].label)

3.1 选择选项

如何访问选中项:

    var selectBox=document.forms[0].elements["location"];
    var selectedOption=selectBox.options[selectBox.selectedIndex];

指定选中哪一项:

selectBox.options[1].selected=true;

3.2 添加选项

方法一:操作DOM

    var newOption=document.createElement("option");
    newOption.appendChild(document.createTextNode("天津"));
    selectBox.appendChild(newOption);

方法二:option构造函数

    var newOption=new Option("天津","select4");
    selectBox.appendChild(newOption);

方法三:选择框的add()方法

    var newOption=new Option("天津","select4");
    selectBox.add(newOption,1)//索引设为1

3.3 移除选项

方法一:DOM方法

    var selectBox=document.forms[0].elements["location"];
    selectBox.removeChild(selectBox.options[0]);

方法二:选择框的remove()方法

    var selectBox=document.forms[0].elements["location"];
    selectBox.remove(0);

3.3 移动和重排选项

利用appendChild属性将选择框1中的option移动到选择框2。(appendChild方法传入一个文档已经存在的元素会将该元素从它的父节点删除然后再添加)

        var select1=document.forms[0].elements["location1"];
        var select2=document.forms[0].elements["location2"];
        select2.appendChild(select1.options[0])

insertBefore方法:

        var select1=document.forms[0].elements["location1"];
        var select2=document.forms[0].elements["location2"];
        var optionMove=select1.options[0];
        select2.insertBefore(optionMove,select2.options[1]);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容

  • 本章内容 理解表单 文本框验证与交互 使用其他表单控制 14.1 表单的基础知识 通过document.forms...
    闷油瓶小张阅读 360评论 0 0
  • 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放...
    孤魂草阅读 867评论 0 0
  • 个人博客:https://yeaseonzhang.github.io 花了半个多月的时间,终于又把“JS红宝书”...
    Yeaseon阅读 1,720评论 2 23
  • 读书笔记 迅速歼灭不该做的事情,接着对该做的事情发起熟练的、跨学科的攻击,然后,当合适的机会来临——只有当合适的机...
    SweetCC阅读 206评论 0 0
  • 正是因为跑步的时候什么都不用想所以才喜欢跑步。每天要想的事情那么多,只有跑步的时候才能放松下来,什么都不用想,只管...
    来福喵咪阅读 298评论 0 0