JAVASCRIPT高级程序设计_11_表单

• 在HTML 中，表单是由<form>元素来表示的，而在JavaScript 中，表单对应的则是HTMLFormElement 类型

• HTMLFormElement类型除了继承了HTMLElement的属性外，还具有一些独有的属性和方法，下面列举几点

1. 通过document.forms可以获得页面中的所有表单，可通过数值索引或者name值来获得特定表单

        var form=document.forms[0];
        console.log(form.name)//textForm, name是自定义的名字
        console.log(form.elements[0].nodeName);//input, nodeName是标签名
//html中
<form name="textForm" value="aaa">
        <input type="text" name="text_1" >
        <input type="text" name="text_2">
    </form>

　　2. form中提交表单的三种方法

    <!-- 提交表单 -->
    <form>
        <input type="image" name="">
        <input type="submit" name="">
        <button type="submit"></button>
    </form>

　　如果需要阻止表单数据的提交，调用defaultPrevent()方法即可。一般来说，在表单数据无效而不能发送给服务器时，可以使用这一技术。

　　js中也可以通过或form.submit()方法提交表单。

　　3. 为了防止用户多次提交重复表单，可以第一次提交表单后就禁用提交按钮，或者利用onsubmit 事件处理程序取消后续的表单提交操作。

　　4. 重置表单

• • 通过将type设置为reset，用户单击重置按钮重置表单时，会触发reset 事件，在重置表单时，所有表单字段都会恢复到页面刚加载完毕时的初始值

    <!-- 充值表单 -->
    <form>
        <input type="text" name="">
        <input type="reset" name="">
    </form>

　　5. 表单的element属性。通过form.element[ ]可以访问form表单内的标签，如<input>　<button> <textarea>等

　　6. 表单的属性

    <!-- 表单属性 -->
    <form id="field">
        <input type="text" name="">
        <input type="button" name="">
        <input type="radio" name="">
    </form>

        //表单属性
        var form=document.getElementById('field');
        var field=form.elements[0]//field调用第一个input
        field.value="another value";
        console.log(field.form)//form;
        field.focus()//焦点设置到当前字段
        field.disabled=true;//禁用当前字段

value, form, focus和disabled等属性。

• • 为了避免多次提交表单，可以这样设计

        EventUtil.addHandler(form,"submit",function(){
            event=EventUtil.getEvent(event);
            var target=EventUtil.getTarget(event);

            var btn=target.element["submit-button"];
            btn.disabled=true;
        })

　　7. 表单字段和方法

• • 表单共有focus和blur两种方法
  • focus（）方法，比如可以在页面加载完毕，表单内就出现插入符号，等待用户输入。HTML5为表单增加了一个autofocus字段，可以直接设置

<input type="text" autofocus>

• • blur（）方法与focus（）方法相反，将焦点移走。

  • change 事件在不同表单控件中触发的次数会有所不同。对于<input>和<textarea>元素，当它们从获得焦点到失去焦点且value 值改变时，才会触发change 事件。对于<select>元素，只要用户选择了不同的选项，就会触发change 事件；换句话说，不失去焦点也会触发change 事件。

• 文本框脚本

1. <input>和<textarea>两个比较相似，区别在：

• • 对于input来说，通过设置size 特性，可以指定文本框中能够显示的字符数。通过value 特性，可以设置文本框的初始值，而maxlength 特性则用于指定文本框可以接受的最大字符数

  • 对于textarea来说，可以使用rows和cols 特性设置字符的行数和列数，但是不能设置最大字符数。

• 选择文本

1. select()方法，可以将焦点设置到文本框内的同时选择所有的文本。所以可以通过设置这个方法快速的删除、复制文本框内的文本
2. select()事件，一旦选择文本便可触发。通过selectionStart和selectionEnd来获取选择到的文本

        //输出选择到的字符串
        var textbox=document.getElementById('textbox');
        console.log(textbox.value);
        textbox.onselect=function(){
            console.log(textbox.value.substring(textbox.selectionStart,textbox.selectionEnd))
        }

　　3. 选择部分文本，调用selectionRange()，传入两个参数，头和尾。

• 过滤输入

1. 借助keypress事件，可以获得输入的字符（event.keycode/event.charCode），同时过滤输入的结果（借助preventDefault()）。
2. 操作剪贴板（比如你在淘宝买了一个帐号，复制帐号密码到剪贴板的时候，可以用这个功能）

• • 使用clipboardData 对象，在IE中是window的属性，在在Firefox 4+、Safari 和Chrome 中，这个对象是相应event 对象的属性　
  • clipboardData 对象有三种方法，：getData()、setData()和clearData()
• HTML5约束

1. 有一些必填的字段，借助required关键字

<input type="text" name="username" required>

　　2. 其他的输入类型

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

　　3. 数值范围

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

　　4. 输入模式，借助正则限制

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

　　5. 禁用验证

<form method="post" action="signup.php" novalidate>

• 选择框脚本

1. 选择框是通过<select>和<option>元素创建的，通过text和value可以获取option的文本和值

    <!-- 选择框 -->
    <form id='selectForm'>
        <select id="select_A">
            <option value="firstChoice">Choice 1</option>
            <option>Choice 2</option>
            <option>Choice 3</option>
        </select>
        <select id="select_B">
            <option>Choice 5</option>
            <option>Choice 6</option>
        </select>
    </form>

        //选择框JS
        var formBox=document.getElementById('selectForm');
        var firstSelect=formBox.elements[0];
        console.log(firstSelect.options[0].text);//choice 1
        console.log(firstSelect.options[0].value);//firstChoice

　　记住层级结构，forms内的元素可以通过elements[ ]来访问，select内的选择项，通过options[ ]来访问。

        //firstSelect具有一个selectedIndex属性，返回选择项的下标
        var selectedOption=firstSelect.options[firstSelect.selectedIndex];
        console.log(selectedOption.text)//choice 1

　　2. 通过add方法给下拉菜单添加选项

        //动态的添加选项
        var newOption=new Option("optionText","optionValue")
        firstSelect.add(newOption,undefined);

• • Option包装成了对象，传入text和value两个参数
  • add（）方法，它的存在，专门为select表单来添加选项。

　　3. 移除选项

    firstSelect.remove(3);//移除新的选项

• 表单序列化

1. 　浏览器是怎样将数据发送给服务器的？

• • 对表单字段的名称和值进行URL 编码，使用和号（&）分隔
  • 禁用的表单字段，type为reset和button的， 不发送。

　　2. 富文本编辑

• • 又称所见即所得

<div  id="richedit" style="height: 100px;width:100px;border: 1px solid black" ></div>

        //添加富文本区域
        var div=document.getElementById('richedit');
        div.contentEditable="true";

• • 添加一些控件

<!-- 富文本 -->
    <div id="richedit" style="height: 100px;width:100px;border: 1px solid black" ></div>
    <div id="buttons">
        <button id="btn1" >打开编辑</button>
        <button id="btn2" >关闭编辑</button><br />
        <button id='justifycenter'>居中</button>
        <button id='justifyleft'>左对齐</button><br />
        <button id="italic">斜体</button>
    </div>

EventUtil.addHandler(btn,'click',function(){
            event=EventUtil.getEvent(event);
            var target=EventUtil.getTarget(event);
            switch(target.id){
                case "btn1":
                richedit.contentEditable=true;
                break;
                case "btn2":
                richedit.contentEditable=false;
                break;
                case "justifycenter":
                document.execCommand('justifyCenter');
                break;
                case "justifyleft":
                document.execCommand('justifyLeft');
                break;
                case "italic":
                document.execCommand("italic",false,null);
            }
        })

• • 表单提交：因为富文本不是form控件实现的，所以需要将富文本中的innerHTML提交赋给表单，然后再提交给服务器

EventUtil.addHandler(form, "submit", function(event){
　　event = EventUtil.getEvent(event);
　　var target = EventUtil.getTarget(event);
　　target.elements["comments"].value = frames["richedit"].document.body.innerHTML;
});