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...