javascript基礎 表單操作

2021-08-22 15:16:59 字數 4543 閱讀 6049

html表單是通過元素來定義的,它有以下特性

method –表示瀏覽器髮撻get請求或是傳送post請求

action – 表示表單所要提交到的位址url

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

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

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

--主要的html輸入元素。通過type特性來判斷是哪種輸入控制項

text

radio

checkbox

file

password 密碼框

button 按鈕

submit 提交按鈕

reset 重置

hidden 隱藏域

image

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

//指定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()}}

for(var i=0;iif (otextarea[i].type=="text" || otextarea[i].type=="password")

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

function attachkeyup();

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

function tabforward(otextbox) } } } }

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

function attachkeydown()       };   } }}

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

雖然元素可以很容易地限制允許的字元數量,但

function isnotmax(otextarea)

return otextarea.value.length!=otextarea.getattribute("maxlength");

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

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

1、阻止無效的字元

function blockchars(otextbox) ;//允許右鍵選單

if (oevent.ctrlkey && schar=="v")   }

return bisvalidchar ;   }

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

function numericscroll(otextbox)

}else if (oevent.keycode == 40) //向下箭頭

}}列表框與組合框

//相當於combox

18-21

22-25

26-29

over 35

組合框//相當於listbox

18-21

22-25

26-29

over 35

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、設定列表項多選項

} // multiple="multiple"實現多選

}   18-21

}   22-25

}   26-29

}   over 35 }

//得到多選

function getselectedindexs (olistbox) }

return arrindexs;

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

function add(olistbox,sname,svalue)

var option = document.createelement("option");//建立乙個節點

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

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

option.setattribute("value",svalue);

5、刪除選項

function del(index)

清空所有選項

function clear(olistbox)} //一定要從後往前刪除

6、移動選項

function move(olistfrom,olistto,index){ //要移動的組合框,要移動到的組合框,要移動項

var ooption = olistfrom.options[index];

if (ooption){

function add(olistbox,sname,svalue)

var option = document.createelement("option");

if (arguments.length == 3)

option.setattribute("value",svalue);

function del(index)

var olistbox = document.getelementbyid("selage");

olistbox.remove(index);

function move(olistfrom,olistto,index)

var ooption = olistfrom.options[index];

if (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);

18-21

22-25

26-29

over 35

> " οnclick="goright()"/>

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 (iindexvar ooption = olistbox.options[iindex];

var onextoption = olistbox.options[iindex+1];

olistbox.insertbefore(onextoption,ooption);

Javascript基礎 09DOM高階操作

1 image物件 1.1 image物件的建立方式 1 通過建構函式方式建立 var img new image 500 500 第乙個引數為寬度,第二個引數為高度 2 通過 document.createelement 建立img物件 var img document.createelement...

javascript 基礎 js實現簡單表單驗證

分為三部分 第一部分 function prepareforms 通過這個函式呼叫form的提交事件 然後攔截驗證表單 如果為ture允許提交 如果為flase 則不觸發提交 function validateform whichform if elem.type email return true...

JavaScript表單驗證

大家看到這段 有何感想。有同學會問,這有問題嗎?沒問題。只是不怎麼好看而且有些難以維護。那麼我們來看看有沒有更好的方式吧。本文所以的 都在這個鏈結。github.com link x veri 首先 未動,文件先行我們先來看下這一坨東西 變數 var obj date 2018 10 10 08 0...