javascript基礎、表單操作

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

HTML表單是通過<form/>元素來定義的,它有以下特性

method –表示瀏覽器發撻GET請求或是傳送POST請求

action – 表示表單所要提交到的地址URL

enctype – 當向伺服器端傳送資料時，資料應該使用的編碼方法，預設的是application/x-www-url-encoded,不過，如果上傳檔案，可以設定成multipart/form-data.

accept – 當上傳檔案時，列出伺服器能正確處理的mime型別

accept-charset – 當提交資料時，列出伺服器所能接受的字元編碼

表單可以包含任意數目的輸入元素

<input/> --主要的HTML輸入元素。通過type特性來判斷是哪種輸入控制元件

text

radio

checkbox

file

password 密碼框

button 按鈕

submit 提交按鈕

Reset 重置

Hidden 隱藏域

image

<select/> -- 組合框與下拉列表框,裡面的值由<option/>元素定義.

<textarea/> --多行文字框，尺寸由rows和cols來定義

二、對form元素進行指令碼程式設計

1、如何獲取form表單

var oForm = document.getElementById(“form1”)

var oForm = document.forms[0]

var oForm = document.forms[“form1”]

2、訪問表單欄位(利用name屬性)

var oField = oForm.elements[0];

var oField = oForm.elements[“txtUser”]//通過id訪問

var oField = oForm.txtUser

var oField = oForm[“txtUser”]

注：也可直接用document.getElementById(“txtUserID”);

表單欄位的共性

所有表單欄位（除hidden欄位）,都包含同樣的屬性方法和事件

disabled特性:用於獲取或設定表單控制元件是否被禁用

blur()方法，可以使表單欄位失去焦點（將焦點移到他處）

focus()方法，可以使表單獲得焦點

例:

Var oFiled1 = oForm.elements[0];

Var oFiled2 = oForm.elements[1];

oField1.disabled = true; //禁用

oField2.focus();//獲取焦點

alert(oField1.form == oForm); //output “true”

應用1:聚焦於第一個欄位

注意：讓form的第一個元素獲取焦點的程式碼：

document.forms[0].elements[0].focus()

但此時，如果第一個欄位是隱藏欄位，則會出錯

故程式碼應如下所示：

if (document.forms.length>0)

{

for(var i=0;i<document.forms[0].elements.length;i++)

{

var oField = document.forms[0].elements[i];

if (oField.type!="hidden")

{

oField.focus();

return;}

}

應用2:提交表單

當用戶點選一個按鈕，無需其他編碼，就可以提交表單，如果按回車，預設也認為是提交表單

可以在action中加入警告來檢測表單是否提交

利用submit()方法來提交表單,如：

var oForm = document.Forms[0];

oForm.submit();

也可用按鈕結合上述程式碼實現提交表單

} function go()

} {

} if (confirm("你確實要提交嗎？"))

} {

} document.forms[0].submit();

} }

以上程式碼無論是否點選確定都會提交

正確程式碼：

function go()

{

if (confirm("你確實要提交嗎？"))

{return true;

}else

return false;}

} 應用3：重置表單

<input type=“reset” value=“重置”/> onreset事件，表單元素恢復到頁面載入的狀態

類似於提交按鈕，reset也會觸發form的onreset事件，可以在此處取消表單的重置.

同時，表單也有reset()方法，可以直接從指令碼中重置表單，而無需使用重置按鈕

} function resetform()

} {

} if (confirm("你確實要重置表單嗎？"))

} {

} return true;

} }else

} return false;

} }

表單的onsubmit事件：表單提交前會觸發表單此事件,可以在此處進行表單的驗證，並取消表單提交

} function go()

} {

} if (confirm("你確實要提交嗎？"))

} {

} document.forms[0].submit();

} }else

} return false;

} }

應用4:僅提交一次

<input type=“button” value=“submit”

onclick=“this.disabled=true;this.form.submit()”/>

或

<form action=“xxx.aspx" name="form1" onsubmit="return go()"

} function go()

} {

} if (confirm("你確實要提交嗎？"))

} {

} document.forms[0].mysubmit.disabled = true;

} return true;

} }else

} return false;

} }

三、文字框(text與textarea)

size:允許顯示的字元數

maxlength:最多容納的字元數

如：

<textarea rows=“25” cols=“5”>mytest</textarea>//指定textarea的行數和列數

textarea指定最大字元數無效

獲取和更改文字框的值

使用document.getElementById(“mytxt”).value來獲取或更改文字框的值,如：

var objtxt = document.getElementById(“mytxt”);

If (objtxt)

{

objtxt.value=“aaa”;

}

使文字獲得焦點 objtxt.focus();選擇文字 objtxt.select();

} 文字框事件

focus事件：文字框得到焦點時發生

blur事件:文字框失去焦點時發生

change事件：更改內容後失去焦點時發生（如通過value對其修改則不會觸發）

select事件:當一個或多個字元選中時發生，無論是否通過select()方法。

應用1--自動選擇文字

文字框獲取焦點後自動選中文字

但如果所有文字都想這樣？可通過如下js實現

function setTextFocuse(){

var oInput = document.getElementsByTagName("input");

var oTextArea = document.getElementsByTagName("textarea");

for(var i=0;i<oInput.length;i++) {

if (oInput[i].type=="text" || oInput[i].type=="password"){

oInput[i].onfocus = function(){this.select();}}}

for(var i=0;i<oTextArea.length;i++) {

if (oTextArea[i].type=="text" || oTextArea[i].type=="password"){

oTextArea[i].onfocus = function(){this.select();}

}

應用2 – 自動切換到下一個

應用說明：當某個文字框只允許接受指定數量的字串時，如果能直接切換到下一個欄位，豈不很好，當輸入社會安全碼、身份證號或是產品ID數字時，常會用到這個功能

function AttachKeyUp(){

var oInputs = document.getElementsByTagName("input");

for(var i=0;i<oInputs.length;i++) {

if (oInputs[i].type!=="hidden" && oInputs[i].getAttribute("maxlength")!=2147483647) {

oInputs[i].onkeyup=function(){tabForward(this);};

// tabForward(this)焦點自動跳到下一個可用文字框

}

function tabForward(oTextBox) {

var oForm = oTextBox.form;//獲取表單元素

if (oForm.elements[oForm.elements.length-1]!=oTextBox

//當前表單最後元素是不是當前元素

&& oTextBox.value.length == oTextBox.getAttribute("maxlength")){

//當前文字框的字數是不是文字框的最大輸入字數

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

if (oForm.elements[i]==oTextBox){

for(var j=i+1;j<oForm.elements.length;j++){

oForm.elements[j].focus();//下一個文字框獲得焦點

return; }} } } }

=========敲回車進入下一文字框

function AttachKeyDown() {

var oInputs = document.getElementsByTagName("input");

for(var i=0;i<oInputs.length;i++) {

if (oInputs[i].type!=="hidden"){

oInputs[i].onkeydown=function(){

var event = window.event;

if (event.keyCode==13) //按下鍵的aciLL值

{enterForward(this); } }; } }}

應用3 -- 限制textarea的字元數

雖然<input/>元素可以很容易地限制允許的字元數量，但<textarea/>元素卻不能，它沒有maxlength屬性，解決方法是用javascript來模仿maxlength屬性.如：

function isNotMax(oTextArea)

{

return oTextArea.value.length!=oTextArea.getAttribute("maxlength");

}

onkeypress 事件會在鍵盤按鍵被按下並釋放一個鍵時發生。 Textbox寫入數值的時候一直觸發這個事件

應用4 – 允許/阻止文字框中的字元

1、阻止無效的字元

function blockChars(oTextBox) { // invalidchars不可用的字元

var oEvent = window.event;//得到物件

var sInvalidChars = oTextBox.getAttribute("invalidChars");

var sChar = String.fromCharCode(oEvent.keyCode);//將鍵盤獲取到的Unicode 轉換成字母或數字

var bIsValidChar = sInvalidChars.indexOf(sChar)==-1;

return bIsValidChar;//return true說明能輸入進去，如果return false 說明輸入不進去

}

2、允許有效的字元

function allowChars(oTextBox){

var oEvent = window.event; // acceptChars允許輸入字元

var sallowChars = oTextBox.getAttribute("acceptChars");

var sChar = String.fromCharCode(oEvent.keyCode);

var bIsValidChar = sallowChars.indexOf(sChar)>=0;

return bIsValidChar;

}

3、禁止貼上(禁止右鍵選單)

// oncontextmenu="return false" 禁止右鍵選單

// onpaste="return false"禁止貼上

改造上述方法：

function allowChars(oTextBox,bBlockPaste){

var oEvent = window.event;

var sallowChars = oTextBox.getAttribute("acceptChars");

var sChar = String.fromCharCode(oEvent.keyCode);

var bIsValidChar = sallowChars.indexOf(sChar)==-1;

if (bBlockPaste) {//如果允許他貼上

oTextBox.oncontextmenu =function(){ return false};//允許右鍵選單

if (oEvent.ctrlKey && sChar=="V") {//檢測是不是ctrl+v

return false; } }

return bIsValidChar ; }

應用5:使用上下按鍵運算元字文字

function numericScroll(oTextBox){

oEvent = window.event;//得到事件物件

var iValue = oTextBox.value.length ==0?0:parseInt(oTextBox.value);

var iMax = oTextBox.getAttribute("Max");

var iMin = oTextBox.getAttribute("Min");

if (oEvent.keyCode==38) {//向上箭頭

if (iMax==null || iValue<parseInt(iMax)) {

oTextBox.value = iValue+1; }

}else if (oEvent.keyCode == 40) //向下箭頭

{if (iMax==null || iValue>parseInt(iMin)) {

oTextBox.value = iValue-1; } }}

列表框與組合框

<select name=“selAge” id=“selAge”>//相當於combox

</select>

組合框

<select name=“selAge” id=“selAge” size=“3”> //相當於listbox

</select>

1、訪問選項

var oListbox = document.getElementById(“selAge”);

alert(oListbox.options[1].firstChild.nodeValue);

或

alert(oListbox.options[1].getAttribute(“value”);

alert(oListbox.options[1].text)

alert(oListbox.options[1].value);

alert(oListbox.options[1].index); //獲取索引

alert(oListbox.options.length); //獲取選項個數

2、獲取設定選中項

alert(oListbox.selectedIndex); //獲取選中項索引

alert(oListbox.options[oListbox.selectedIndex].text); //獲取選項中項文字

oListbox.selectedIndex=-1; //設定未選中

3、設定列表項多選項

} <select name="selAge" id="selAge" size="4" multiple="multiple">

// multiple="multiple"實現多選

} <option value="1" selected>18-21</option>

} <option value="2">22-25</option>

} <option value="3" selected>26-29</option>

} <option value="4">over 35</option>

} </select>

//得到多選

function getSelectedIndexs (oListBox){

var arrIndexs = new Array();

for(var i=0;i<oListBox.options.length;i++){

if (oListBox.options[i].selected) {

arrIndexs.push(i);//把索引放入陣列} }

return arrIndexs;

}

4、給下拉列表框新增選項

function add(oListBox,sName,sValue)

{

var oPtion = document.createElement("option");//建立一個節點

oPtion.appendChild(document.createTextNode(sName));

//建立一個文字節點新增到option

if (arguments.length == 3)//如果有第三個選項

{

oPtion.setAttribute("value",sValue);

}

oListBox.appendChild(oPtion);

}

5、刪除選項

function Del(index){

var oListBox = document.getElementById("selAge");

oListBox.options[index]=null;

// oListBox.remove(index);}

清空所有選項

function Clear(oListBox){

for(var i=oListBox.options.length-1;i>=0;i--) {

oListBox.remove(i); }} //一定要從後往前刪除

6、移動選項

function move(oListFrom,oListTo,index){ //要移動的組合框，要移動到的組合框，要移動項

var oOption = oListFrom.options[index];

if (oOption){

oListTo.appendChild(oOption);}}

function add(oListBox,sName,sValue)

{

var oPtion = document.createElement("option");

oPtion.appendChild(document.createTextNode(sName));

if (arguments.length == 3)

{

oPtion.setAttribute("value",sValue);

}

oListBox.appendChild(oPtion);

}

function Del(index)

{

var oListBox = document.getElementById("selAge");

//oListBox.options[index]=null;

oListBox.remove(index);

}

function move(oListFrom,oListTo,index)

{

var oOption = oListFrom.options[index];

if (oOption)

{

oListTo.appendChild(oOption);

}

function goRight()

{

var oListFrom = document.getElementById("fromList");

var oListTo = document.getElementById("toList");

move(oListFrom,oListTo,oListFrom.selectedIndex);

}

function goLeft()

{

var oListFrom = document.getElementById("toList");

var oListTo = document.getElementById("FromList");

move(oListFrom,oListTo,oListFrom.selectedIndex);

}

</select></td>

<input type="button" value=" >> " onclick="goRight()"/>

</td><td>

</select>

7、重新排序選項

function shiftUp(oListBox,iIndex)

{

if (iIndex>0)

{

var oOption = oListBox.options[iIndex];

var oPrevOption = oListBox.options[iIndex-1];

oListBox.insertBefore(oOption,oPrevOption);//把後者插入到前者

}

function shiftDown(oListBox,iIndex)

{

if (iIndex<oListBox.options.length-1)

{

var oOption = oListBox.options[iIndex];

var oNextOption = oListBox.options[iIndex+1];

oListBox.insertBefore(oNextOption,oOption);

}

javascript基礎、表單操作

javascript基礎、表單操作

javascript基礎之表單

vue.js基礎知識篇(3):計算屬性、表單控件綁定

【第一天】django快速開發——環境部署、表單、數據庫操作、模板、文件學習

html基礎筆記-表單、鏈接

VUE - 基礎語法（事件、表單）

前端（十五）—— JavaScript事件：繫結事件方式、事件的冒泡和預設事件、滑鼠事件、鍵盤事件、表單事件、文件事件、圖片事件、頁面事件

HTML5基礎（列表、塊、佈局、表單、實體）

js 表單操作補充(取得表單欄位元素，input選擇文字、獲取選擇文字的值)

MySQL學習筆記：資料庫基礎、MySQL基本操作、表的查詢

JavaScript（正則表示式、表單驗證、郵箱驗證、函式、HTML DOM）

html,基礎'表單'操作

jqm文件上傳,上傳圖片,jqm的表單操作,jqm的ajax的使用,jqm文件操作大全,文件操作demo

第3天：CSS浮動、定位、表格、表單總結

Flask10 登錄模塊、表單框架、表單渲染、表單驗證、bookie、請求之前鉤子、g對象、編寫裝飾器

JavaScript基礎 -- 常見DOM樹操作

angular 表單操作

MySQL用戶、庫、表的操作語法關於用戶的語法

用javascript編寫地區表單ES6

HTML5（二）——特殊符號、新增屬性、表單重寫屬性、

javascript基礎、表單操作

相關推薦