2. 程式人生 > >JavaScript基礎——表單指令碼

JavaScript基礎——表單指令碼

阿新 • • 發佈：2019-01-15

雖然HTML和Web應用自誕生以來已經發生了天翻地覆的變化，但Web表單相對卻沒有什麼改變。

使用JavaScript可以增強已有的表單欄位，從而創造出新的功能，或者提升表單的易用性。

為此，表單、表單欄位都引入了相應的屬性和方法，以便JavaScript使用。下面介紹幾個概念：

1）可以使用一些標準或非標準的方法選擇文字框中的部分或部分文字。

2）大多數瀏覽器都採用了Firefox操作選擇文字的方式，但ie仍然堅持自己的實現。

3）在文字框的內容變化時，可以通過偵聽鍵盤事件以及檢測插入的字元，來允許或禁止使用者輸入的某些字元。

除Opera之外的所有瀏覽器都支援剪貼簿事件，包括copy、cut和paste.其他瀏覽器在實現剪貼簿事件時也可以分

以下幾種不同的情況：

1）IE、Firefox、Chrome和Safari允許通過JavaScript訪問剪貼簿中的資料，而Opera不允許這種訪問方式。

2）即使是IE、Chrome和Safari，它們各自的實現方式也不相同。

3）Firefox、Chrome和Safari只允許在paste事件發生時讀取剪貼簿資料，而IE沒有這個限制。

4）Firefox、Chrome和Safari只允許在發生剪貼簿事件時訪問與剪貼簿相關的資訊，而IE允許在任何時候訪問相關資訊。

在文字框內容必須限制為某些特定字元的情況下，就可以利用剪貼簿事件來遮蔽通過貼上向文字框中插入內容的操作。

選擇框也是經常要通過JavaScript來控制的一個表單欄位。由於有了DOM，對選擇框的操作比以前要方便多了。

新增選項、移除選項、將選項從一個選擇框移動到另一個選擇框，甚至對選項進行排序等操作，都可以使用標準的DOM技術來實現。

富文字編輯功能是通過一個包含空HTML文件的iframe元素來實現的。通過將空文件的designMode屬性設定為"on",就可以將該頁面轉換為可編輯狀態，此時其表現如同字處理軟體。另外，也可以將某個元素設定為contenteditable。

在預設情況下，可以將字型加粗或者將文字轉換為斜體，還可以使用剪貼簿。JavaScript通過使用execCommand()方法也可以實現相同的一些功能。另外，使用queryCommandEnabled()、queryCommandState()和queryCommandValue()方法則可以取得有關文字選區的資訊。由於以這種方式構建的富文字編輯器並不是一個表單欄位，因此在將其內容提交給伺服器之前，必須將iframe或contenteditable元素中的HTML複製到一個表單欄位中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表單指令碼</title>
    <style>
        .editable{
            width:100px;
            height: 100px;
            border: 1px solid green;
        }
    </style>
</head>
<body>
<form name="myForm" id="myForm">
    <!--通用提交按鈕-->
    <input type="submit" value="提交表單">
    <!--自定義提交按鈕-->
    <button type="submit">提交表單</button>
    <!--影象按鈕-->
    <input type="image" src="submit.png">
    <!--通用重置表單-->
    <input type="reset" value="重置表單">
    <!--自定義重置表單-->
    <button type="reset">重置表單</button>

    <input type="text" name="textBox">
    <!--自動獲取焦點-->
    <input type="text" autofocus>
    <input type="submit" value="確定" name="submit_btn">
    <!--自定義文字框-->
    <input type="text" size="25" maxlength="50" value="文字框" name="textbox1">
    <textarea rows="5" cols="25">多行文字框</textarea>
    <input type="text" name="textbox2">

    <input type="text" name="tel1" id="txtTel1" maxlength="3">
    <input type="text" name="tel2" id="txtTel2" maxlength="3">
    <input type="text" name="tel3" id="txtTel3" maxlength="4">

    <!--填欄位必-->
    <input type="text" name="username" required>
    <!--html5指定輸入型別-->
    <input type="email" name="email">
    <input type="url" name="homepage">
    <!--指定使用者輸入0~100之間5的倍數的值-->
    <input type="number" min="0" max="100" step="5" name="count">
    <!--只允許輸入數值-->
    <input type="text" pattern="\d+" name="count">

    <!--選擇框-->
    <select name="location" id="selLocation">
        <option value="上海">上海</option>
        <option value="北京">北京</option>
        <option value="深圳">深圳</option>
        <option value="">中國</option>
        <option>義大利</option>
    </select>

    <!--富文字編輯-->
    <div class="editable" id="richedit" contenteditable></div>
</form>
<script src="l14.js"></script>
</body>
</html>
/**
 * 表單指令碼
 */
function cl(x){
    console.log(x);
}
//跨瀏覽器事件物件
var EventUtil={
    //新增事件監聽
    addHandler:function(element,type,handler){
        if(element.addEventListener){
            element.addEventListener(type,handler,false);//w3c
        }else if(element.attachEvent){
            element.attachEvent("on"+type,handler);//IE
        }else{
            element["on"+type]=handler;//低版本瀏覽器
        }
    },
    //獲取事件元素
    getEvent:function(event){
        return event?event:window.event;
    },
    //獲取事件目標
    getTarget:function(event){
        return event.target||event.srcElement;
    },
    //阻止預設事件
    preventDefault:function(event){
        if(event.preventDefault){
            event.preventDefault();//W3C
        }else{
            event.returnValue=false;//IE
        }
    },
    //移除事件監聽
    removeHandler:function(element,type,handler){
        if(element.removeEventListener){
            element.removeEventListener(type,handler,false);//W3C
        }else if(element.detachEvent){
            element.detachEvent("on"+type,handler);//IE
        }else{
            element["on"+type]=null;//低版本瀏覽器
        }
    },
    //阻止冒泡
    stopPropagation:function(event){
        if(event.stopPropagation){
            event.stopPropagation();//W3C
        }else{
            event.cancelBubble=true;//IE
        }
    },
    //相關元素屬性
    getRelatedTarget:function(event){
        if(event.relatedTarget){
            return event.relatedTarget;
        }else if(event.toElement){
            return event.toElement;
        }else if(event.fromElement){
            return event.fromElement;
        }else{
            return null;
        }
    },
    //獲取滑鼠按鈕屬性
    getButton:function(event){
        if(document.implementation.hasFeature("MouseEvents","2.0")){
            return event.button;
        }else{//IE8及以下
            switch (event.button){
                case 0:
                case 1:
                case 3:
                case 5:
                case 7:
                    return 0;
                case 2:
                case 6:
                    return 2;
                case 4:
                    return 1;
            }
        }
    },
    //獲取滑鼠滾輪事件屬性
    getWheelDelta:function(event){
        if(event.wheelDelta){
            return (client.engine.opera && client.engine.opera<9.5 ?
                -event.wheelDelta:event.wheelDelta);
        }else{
            return -event.detail*40;
        }
    },
    //獲取字元編碼屬性
    getCharCode:function(event){
        if(typeof event.charCode=="number"){
            return event.charCode;
        }else{
            return event.keyCode;
        }
    },
    //獲取剪貼簿屬性
    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);
        }
    }
};

/**
 *14.1 表單的基礎知識
 */
//HTMLFormElement有獨有的屬性和方法
//acceptCharset、action、element、enctype、length、method、name、reset()、submit()、target
//取得<form>元素引用的方式：
var form=document.getElementById("myForm");
var firstForm=document.forms[0];
var myForm=document.forms["myForm"];
//14.1.1 提交表單
//form.submit();
//如何阻止表單提交
var form=document.getElementById("myForm");
EventUtil.addHandler(form,"submit",function(event){
    //取得事件物件
    event=EventUtil.getEvent(event);
    //阻止預設事件
    EventUtil.preventDefault(event);
});
//如何不讓使用者重複提交表單
//1.在第一次提交表單後就禁用提交按鈕；2.利用onsubmit事件處理程式取消後續的表單提交操作
//14.1.2 重置表單(慎用)
//form.reset();
//阻止重置表單
var form=document.getElementById("myForm");
EventUtil.addHandler(form,"reset",function(event){
    //取得事件物件
    event=EventUtil.getEvent(event);
    //阻止預設事件
    EventUtil.preventDefault(event);
});
//14.1.3 表單欄位
//每個表單都有elements屬性，該屬性是表單中所有元素的集合
var form=document.getElementById("myForm");
//取得表單中的第一個欄位
var field1=form.elements[0];
//取得名為"textBox"的欄位
var field2=form.elements["textBox"];
//取得表單中包含的欄位的數量
var filedCount=form.elements.length;
//14.1.3.1 共有的表單欄位屬性
//disabled、form、name、readOnly、tabIndex、type、value
//通過js動態修改欄位的屬性
var form=document.getElementById("myForm");
var field=form.elements[0];
field.value="確認提交";//修改value屬性
cl(field.form===form);//=>true 檢查form屬性的值
field.disabled=true;//禁用當前欄位
field.type="email";//修改type屬性
//避免多次提交表單
EventUtil.addHandler(form,"submit",function(event){
    event=EventUtil.getEvent(event);
    var target=EventUtil.getTarget(event);
    //取得提交按鈕
    var btn=target.elements["submit_btn"];
    //禁用按鈕
    btn.disabled=true;
});
//14.1.3.2 共有的表單欄位方法
//focus()、blur()
//偵聽load事件，在指定欄位上呼叫focus方法
EventUtil.addHandler(window,"load",function(event){
    var element=document.forms[0].elements["textBox"];
    if(element.autofocus!==true){
        element.focus();
    }
});
//14.1.3.3 共有的表單欄位事件
//focus事件、blur事件、change事件
var textBox=document.forms[0].elements["textBox"];
//獲取焦點時設定背景色
EventUtil.addHandler(textBox,"focus",function(event){
    event=EventUtil.getEvent(event);
    var target=EventUtil.getTarget(event);
    if(target.style.backgroundColor!="red"){
        target.style.backgroundColor="yellow";
    }
});
//失去焦點時改變背景色
EventUtil.addHandler(textBox,"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(textBox,"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="";
    }
});

/**
 * 14.2 文字框指令碼
 */
var textbox1=document.forms[0].elements["textbox1"];
cl(textbox1.value);
textbox1.value="新的文字框";
cl(textbox1.value);
//14.2.1 選擇文字
//呼叫select()方法，可以把焦點設定到文字框中
EventUtil.addHandler(textbox1,"focus",function(event){
    event=EventUtil.getEvent(event);
    var target=EventUtil.getTarget(event);
    //獲得焦點即選中所有的文字
    target.select();
});
//14.2.1.1 選擇(select)事件
EventUtil.addHandler(textbox1,"select",function(event){
    cl("文字框選中了："+textbox1.value);
});
//14.2.1.2 取得選擇的文字
function getSelectedText(textBox){
    return textBox.value.substring(textBox.selectionStart,textBox.selectionEnd);
}
//14.2.1.3 選擇部分文字
textbox1.value="Hello world";
//選擇所有文字
var str1=textbox1.setSelectionRange(0,textbox1.value.length);
//選擇前3個字元
var str2=textbox1.setSelectionRange(0,3);

//14.2.2 過濾輸入
//14.2.2.1 遮蔽字元
var textbox2=document.forms[0].elements["textbox2"];
EventUtil.addHandler(textbox2,"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){
        EventUtil.preventDefault(event);
    }
});
//14.2.2.2 操作剪貼簿
//剪貼簿事件：beforecopy、copy、beforecut、cut、beforepaste、paste
EventUtil.addHandler(textbox2,"paste",function(event){
    event=EventUtil.getEvent(event);
    var text=EventUtil.getClipboardText(event);
    if(!/^\d*$/.test(text)){
        EventUtil.preventDefault(event);
    }
});

//14.2.3 自動切換焦點
(function(){
    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,len=form.elements.length;i<len;i++){
                if(form.elements[i]==target){
                    if(form.elements[i+1]){
                        form.elements[i+1].focus();
                    }
                    return;
                }
            }
        }
    }
    var textbox1=document.getElementById("texTel1");
    var textbox2=document.getElementById("texTel2");
    var textbox3=document.getElementById("texTel3");

    EventUtil.addHandler(textbox1,"keyup",tabForward);
    EventUtil.addHandler(textbox2,"keyup",tabForward);
    EventUtil.addHandler(textbox3,"keyup",tabForward);
})();

//14.2.4 HTML5約束驗證API
//14.2.4.1 必填欄位
//檢查某個表單欄位是否為必填欄位
var isUsernameRequired=document.forms[0].elements["username"].required;
//測試瀏覽器是否支援required屬性
var isRequiredSupported="required" in document.createElement("input");
//14.2.4.2 其他輸入型別 email、url
//測試瀏覽器是否支援email型別
var input=document.createElement("input");
input.type="email";
var isEmailSupported=(input.type=="email");
//14.2.4.3 數值範圍
//14.2.4.4 輸入模式
//訪問欄位的pattern屬性
var pattern=document.forms[0].elements["count"].pattern;
//檢測瀏覽器是否支援pattern屬性
var isPatternSupported="pattern" in document.createElement("input");
//14.2.4.5 檢測有效性
//checkValidity()方法 validity屬性
if(input.validity && !input.validity.valid){
    if(input.validity.valueMissing){
        alert("請輸入一個值");
    }else if(input.validity.typeMismatch){
        alert("請輸入一個email")
    }else{
        alert("沒有輸入值");
    }
}
//14.2.4.6 禁用驗證
//form標籤中加novalidate屬性
//input標籤中formnovalidate屬性
document.forms[0].noValidate=true;
document.forms[0].elements["btnNoValidate"].formNoValidate=true;

/**
 * 14.3 選擇框指令碼
 */
//HTMLSelectElement型別提供了下列屬性和方法：
//add(newOption,relOption)、multiple、options、remove(index)、selectedIndex、size
//<option>元素都有一個HTMLOptionElement物件，有下列屬性
//index、label、selected、text、value
var selectbox=document.forms[0].elements["location"];
var text=selectbox.options[0].text; //選項的文字
var value=selectbox.options[0].value; //選項的值
//14.3.1 選擇選項
//獲得選中項
var selectedOption=selectbox.options[selectbox.selectedIndex];
//顯示選中項的資訊
cl("選項序號："+selectbox.selectedIndex+"\n 選項文字："+
    selectedOption.text+"\n選項值："+selectedOption.value);
//取得所有選中的項
function getSelectedOptions(selectbox){
    var result=new Array();
    var option=null;
    for(var i= 0,len=selectbox.options.length;i<len;i++){
        option=selectbox.options[i];
        if(option.selected){
            result.push(option);
        }
    }
    return result;
}
//14.3.2 新增選項：add()方法、insertBefore()方法
var newOption=new Option("選項文字","選項值");
selectbox.add(newOption,undefined);//最佳方案
//14.3.3 移除選項：remove()方法
function clearSelectbox(selectbox){
    for(var i= 0,len=selectbox.options.length;i<len;i++){
        selectbox.remove(i);
    }
}
//14.3.4 移動和重排選項
//將第一個選擇框中的第一個選項移動到第二個選擇框中
var selectbox1=document.getElementById("selLocations1");
var selectbox2=document.getElementById("selLocations2");
selectbox2.appendChild(selectbox1.options[0]);
//在選擇框中向前移動一個選項的位置
var optionToMove=selectbox.options[1];
selectbox.insertBefore(optionToMove,selectbox.options[optionToMove.index-1]);

/**
 * 14.4 表單序列化
 */
function serialize(form){
    var parts=[],
    field=null, i,len, j,optLen,option,optValue;
    for(i=0,len=form.elements.length;i<len;i++){
        field=form.elements[i];
        switch(field.type){
            case "select-one":
            case "select-multiple":
                if(field.name.length){
                    for(j=0,optLen=field.options.length;j<optLen;j++){
                        option=field.options[j];
                        if(option.selected){
                            optValue="";
                            if(option.hasAttribute){
                                optValue=(option.hasAttribute("value")?option.value:option.text);
                            }else{
                                optValue=(option.attributes("value").specified?option.value:option.text);
                            }
                            parts.push(encodeURIComponent(field.name)+"="+encodeURIComponent(optValue));
                        }
                    }
                }
                break;
            case undefined:     //字符集
            case "file":        //檔案輸入
            case "submit":      //提交按鈕
            case "reset":       //重置按鈕
            case "button":      //自定義按鈕
                 break;
            case "radio":       //單選按鈕
            case "checkbox":    //複選框
                if(!field.checked){
                    break;
                }
                /*執行預設操作 */
            default :
                //不包含沒有名字的表單欄位
                if(field.name.length){
                    parts.push(encodeURIComponent(field.name)+"="+encodeURIComponent(optValue));
                }
        }
    }
    return parts.join("&");
}

/**
 * 14.5 富文字編輯
 */
//designMode屬性
EventUtil.addHandler(window,"load",function(){
    frames["richedit"].document.designMode="on";
});
//14.5.1 使用contenteditable屬性
var richedit=document.getElementById("richedit");
richedit.contentEditable="true";
//14.5.2 操作富文字
//document.execCommand()
//轉換粗體文字
document.execCommand('bold',false,null);
//轉換斜體文字
document.execCommand('italic',false,null);
//建立指向www.baidu.com的連結
document.execCommand("createlink",false,"http://www.baidu.com");
//格式化為1級標題
document.execCommand("formatblock",false,"<h1>");
//14.5.3 富文字選區
//使用框架(iframe)的getSelection()方法
//14.5.4 表單與富文字
EventUtil.addHandler(form,"submit",function(event){
    event=EventUtil.getEvent(event);
    var target=EventUtil.getTarget(event);
    target.elements["comments"].value=document.getElementById("richedit").innerHTML;
})



相關推薦

JavaScript基礎——表單指令碼

雖然HTML和Web應用自誕生以來已經發生了天翻地覆的變化，但Web表單相對卻沒有什麼改變。 使用JavaScript可以增強已有的表單欄位，從而創造出新的功能，或者提升表單的易用性。 為此，表單、表單欄位都引入了相應的屬性和方法，以便JavaScript使用。下面介紹幾個

JavaScript之表單基礎知識（表單指令碼）

表單的基礎知識 在HTML中，表單用<form>元素來表示，在JavaScript中，表單用HTMLFormElement來表示，HTMLFormElement繼承了HTMLElement。 獲取表單的引用 取得表單的引用有多種方式，常見的就是通過ID來獲取元

JavaScript表單指令碼

在HTML中，表單是由<form>來表示的。取得<form>元素引用的方式有好幾種，最常見的就是為其新增id特性，然後使用getElementById()方法獲取它。其次，是通過document.forms可以取得頁面中所有的表單。在這個集合中，可以通過數值索引或name值來取得特定的

《Javascript 高階程式設計(第三版)》筆記0x1A 表單指令碼

目錄 表單的基礎知識      提交表單      重置表單      表單欄位         共有的表單欄位屬性    

JavaScript中的表單指令碼

表單指令碼 表單的基礎知識 在HTML中，表單是由<form>元素來表示的。而在JavaScript中，表單對應的則是HTMLFormElement型別。HTMLFormElement繼承了HTMLElement，因而與其他HTML元素具有相同的預設屬性。

說說 JavaScript 表單指令碼之富文字編輯功能

富文字編輯，即所見即所得（What You See Is What You Get）。這個技術的本質是在頁面中嵌入一個包含空 HTML 頁面的 iframe。通過 designMode 屬性（設定為 on），這個頁面就可以被編輯，編輯物件是這個頁面的 <b

javascript 表單指令碼詳解

表單的基礎知識 在HTML中，表單是由<form>元素來組成的。在js中，表單對應的則是HTMLFormElement型別。它和其他HTML元素一樣具有相同的預設屬性。下面是HTMLFormElement獨有的屬性和方法： acceptCharset:伺服器能夠

JavaScript 表單指令碼

理解表單 JavaScript最初的一個應用，就是分擔伺服器處理表單的責任，打破處處依賴伺服器的局面，現在表單已經成為開發Web程式必不可少的一部分了，可是我們又對它瞭解多少啦，下面一起來了解一下表單； 表單的基礎知識 在HTML中，表單是由<form>元素來表

JavaScript之文字框指令碼（表單指令碼）

文字框指令碼 在HTML中，文字框的表現形式有兩種：一種是使用<input>元素且它的type屬性值為"text"來表示單行文字框。二種是使用<textarea>和</textarea>表示多行文字框。 要表示單選文字框，可以使用&l

JavaScript與表單控件

name for only 文本 input 方便 readonly 處理 部分 JavaScript與表單控件 1.表單控件 a) 在HTML中表單控件是客戶端與服務器進行數據傳輸的工具，用來收集客戶端的信息，並允許客戶端的用戶以標準格式向服務器提交數據 b) <f

JavaScript 驗證表單不為空和獲取select下拉列表的值和文本

blog car form 是你 mys 獲取 document options 身份證 1.驗證表單不為空 var hasform = { "Name": "名字", "Id_card": "身份證", "PaySalary": "月工資",

高程3總結#第14章表單指令碼

表單指令碼 表單的基礎知識 HTMLFormElement有自己獨特的屬性和方法 acceptCharset，伺服器能夠處理的字符集，等價於HTML中的accept-charset特性 action，接受請求的URL，等價於HTML中的action特性 elem

JavaScript獲取表單元素值（一）

JavaScript獲取表單元素值 以下四種方式均可獲取，特別注意第三種，     var a=document.getElementById("id1");     var b=document.getElementsByName("na"

Ionic基礎——表單輸入ion-checkbox ion-radio ion-toggle ion-spinner

一.複選按鈕 : ion-checkbox ionic的複選按鈕脫胎於HTML標準的checkbox元素，可以在一組選項中 同時選中多個。    使用ion-checkbox指令聲明覆選按鈕元素：<ion-checkbox>...</ion-checkbo

JavaScript獲取表單的方法

今天繼續學習JavaScript，該筆記主要記錄JavaScript的獲取表單的方法。(通過onclick="xxx()"呼叫函式)。 1.遍歷forms表單陣列 顯示每一個表單的每一個屬性： eg

05HTML基礎--表單標籤

05HTML基礎--表單標籤   表單標籤 作用: 用於收集使用者資訊, 讓使用者填寫、選擇相關資訊 格式: <form>     所有的表單內容，都要寫在form標籤裡面（也叫做表單元素） </f

是有JavaScript判斷表單元素是否為空

寫一個JavaScript函式checkNull()用來判斷表單元素是否為空,如果為控返回false <script type="text/javascript"> funct

javaScript 填充表單值的方法

//填充表單 this.populateForm = function(formId, data){ for(var attr in data){ var formField

使用JavaScript進行表單必填專案驗證和改進

                在網頁提交表單的呃時候，往往需要進行表單的必填項進行驗證，下面我們以兩個例子來寫一下對錶單的必填項

20180603-HTML-基礎-表單-表單基本結構

表單：表單本身不可見。單行文字域密碼框：檔案域：單選框框：複選框：checked預設勾選按鈕：影象域提交按鈕：原來：影象預設是提交按鈕，厲害了！那，重置。。。。咋整，只美化提交按鈕的嗎？？？？？？？？？隱藏域：下拉選單和列表標籤：<select>標籤屬性：<