javascript基礎、表單操作
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:提交表單
<input type = “submit” value=“提交”/>
<input type=“image” src=“submit.gif”/>
當用戶點選一個按鈕,無需其他編碼,就可以提交表單,如果按回車,預設也認為是提交表單
可以在action中加入警告來檢測表單是否提交
<form method=“post” action=“javascript:alert(‘submitted’)”/>
利用submit()方法來提交表單,如:
var oForm = document.Forms[0];
oForm.submit();
也可用按鈕結合上述程式碼實現提交表單
<input type="button" value="提交" onclick="go()" />
} function go()
} {
} if (confirm("你確實要提交嗎?"))
} {
} document.forms[0].submit();
} }
} }
以上程式碼無論是否點選確定都會提交
正確程式碼:
<form action="http://yahoo.com.cn" name="form1" onsubmit="return go()">
function go()
{
if (confirm("你確實要提交嗎?"))
{return true;
}else
return false;}
} 應用3:重置表單
<input type=“reset” value=“重置”/> onreset事件,表單元素恢復到頁面載入的狀態
類似於提交按鈕,reset也會觸發form的onreset事件,可以在此處取消表單的重置.
同時,表單也有reset()方法,可以直接從指令碼中重置表單,而無需使用重置按鈕
<form action="http://yahoo.com.cn" name="form1" onreset = "return resetform()">
} function resetform()
} {
} if (confirm("你確實要重置表單嗎?"))
} {
} return true;
} }else
} return false;
} }
表單的onsubmit事件:表單提交前會觸發表單此事件,可以在此處進行表單的驗證,並取消表單提交
<form action="http://yahoo.com.cn" name="form1" onsubmit=“return go()">
} 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()"
<input type="submit" name="mysubmit" value="提交" />
} function go()
} {
} if (confirm("你確實要提交嗎?"))
} {
} document.forms[0].mysubmit.disabled = true;
} return true;
} }else
} return false;
} }
三、文字框(text與textarea)
size:允許顯示的字元數
maxlength:最多容納的字元數
如:
<input type=“text” size=20;maxlength=“50”/ value=“mytest”>
<textarea rows=“25” cols=“5”>mytest</textarea>//指定textarea的行數和列數
textarea指定最大字元數無效
獲取和更改文字框的值
<input type=“text” id=“mytxt” size=20;maxlength=“50”/ value=“mytest”>
使用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--自動選擇文字
<input type=“text” onfocus=“this.select()”/>
文字框獲取焦點後自動選中文字
但如果所有文字都想這樣?可通過如下js實現
<BODY onload="setTextFocuse()">
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屬性.如:
<textarea id="txt1" cols="10" rows="20" maxlength="10" onkeypress="return isNotMax(this)" ></textarea>
function isNotMax(oTextArea)
{
return oTextArea.value.length!=oTextArea.getAttribute("maxlength");
}
onkeypress 事件會在鍵盤按鍵被按下並釋放一個鍵時發生。 Textbox寫入數值的時候一直觸發這個事件
應用4 – 允許/阻止文字框中的字元
1、阻止無效的字元
<input type=“text” invalidchars=“0123456789” onkeypress="return blockChars(this)"/>
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、允許有效的字元
<input type="text" id="txtUser" acceptChars="0123456789" onkeypress="return allowChars(this)" />
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、禁止貼上(禁止右鍵選單)
<input type="text" id="txtUser" acceptChars="0123456789" onkeypress="return allowChars(this)" onpaste="return false" oncontextmenu="return false"/>
// oncontextmenu="return false" 禁止右鍵選單
// onpaste="return false"禁止貼上
改造上述方法:
<input type="text" id="txtUser" acceptChars="0123456789" onkeydown="return allowChars(this,true)"/>
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:使用上下按鍵運算元字文字
<input type="text" name="txtNumeric" value="0" Max="10" Min="0" onkeydown="numericScroll(this)" />
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
<option value=“1”>18-21</option>
<option value=“2”>22-25</option>
<option value=“3”>26-29</option>
<option value=“4”>over 35</option>
</select>
組合框
<select name=“selAge” id=“selAge” size=“3”> //相當於listbox
<option value=“1”>18-21</option>
<option value=“2”>22-25</option>
<option value=“3”>26-29</option>
<option value=“4”>over 35</option>
</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);
}
<input type="button" value="getValue" onclick="add(document.getElementById('selAge'),'newText','5')"/>
5、刪除選項
function Del(index){
var oListBox = document.getElementById("selAge");
oListBox.options[index]=null;
// oListBox.remove(index);}
<input type="button" value="delete" onclick="Del(1)"/>
清空所有選項
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);
}
<td style="width:100px">
<select id="fromList" size="10" style="width:100px">
<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></td>
<td style="width:50px;text-align:center">
<input type="button" value=" << " onclick="goLeft()"/><p/>
<input type="button" value=" >> " onclick="goRight()"/>
</td><td>
<select id="toList" size="10" style="width:100px">
</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基礎、表單操作
HTML表單是通過<form/>元素來定義的,它有以下特性 method –表示瀏覽器發撻GET請求或是傳送POST請求 action – 表示表單所要提交到的地址URL enctype – 當向伺服器端傳送資料時,資料應該使用的編碼方法,預設的是appli
javascript基礎 之 表單
submit innerhtml ssa 布爾 col mit 流程 ESS name 1,js可以驗證表單 實例1,js獲取表單的內容 //html表單是這樣的 <form name="myForm" action="demo_form.php" onsubmit
vue.js基礎知識篇(3):計算屬性、表單控件綁定
multi option || list text 知識 基礎 unset select標簽 第四章:計算屬性 為了避免過多的邏輯造成模板的臃腫不堪,可使用計算屬性來簡化邏輯。 1.什麽是計算屬性 <!DOCTYPE html><html lang="e
【第一天】django快速開發——環境部署、表單、數據庫操作、模板、文件學習
django 開發 自動化運維 系統技術 web開發 安裝django1、安裝 setuptoolsyum install python-setuptools2、完成之後,就可以使用 easy_install 命令安裝 djangoeasy_install django註意:django對
html基礎筆記-表單、鏈接
包含 color ans 自動刷新 cti 間隔 下拉 htm cap <!DOCTYPE html> <html> <head> <meta charset="UTF-8">
VUE - 基礎語法(事件、表單)
under lse var text {} bsp NPU function value v-on指令,給元素綁定事件: 為事件綁定簡單表達式: <div id="test"> <input v-on:click="counter+=1" type=
前端(十五)—— JavaScript事件:繫結事件方式、事件的冒泡和預設事件、滑鼠事件、鍵盤事件、表單 事件、文件事件、圖片事件、頁面事件
JS事件:繫結事件方式、事件的冒泡和預設事件、滑鼠事件、鍵盤事件、表單 事件、文件事件、圖片事件、頁面事件 一、事件的兩種繫結方式 ******* 1、on事件繫結方式 document.onclick = function() { console.log("文件點選"); } // on事件只
HTML5基礎(列表、塊、佈局、表單、實體)
列表 常用列表標籤 <ol> 有序列表 <ul> 無序列表 <li> 列表項 <dl> 列表 <dt> 列表項 <dd> 描述 無序列表 標籤: <ul&g
js 表單操作補充(取得表單欄位元素,input選擇文字、獲取選擇文字的值)
var form = document.getElementById("myForm"); var field = form.elements[0]; // 選擇文字 field.select() // 選擇部分文字 field.setSelectionRange(0,
MySQL學習筆記:資料庫基礎、MySQL基本操作、表的查詢
#選擇資料庫需要考慮的問題: 1、是否開源 開源軟體不一定免費:MySQL,MariaDB(這兩者語法差不多,MySQL可能閉源,但是MariaDB不會)MongoDB
JavaScript(正則表示式、表單驗證、郵箱驗證、函式、HTML DOM)
正則表示式 1.定義:它是由一個字元序列形成的搜尋模式,當在文字中搜索資料時,可以用搜索模式來描述你要查詢的內容。它可以是一個簡單的字元,或一個更復雜的模式。它可用於所有文字搜尋和文字替換操作。 2.Eg:var patt = /youngamber/i
html,基礎'表單'操作
<!-- 表單操作 --> <form method="傳送方式" action="伺服器檔案"> <!-- 所有的表單操作都應該在其中,不然無法上傳伺服器 --&
jqm文件上傳,上傳圖片,jqm的表單操作,jqm的ajax的使用,jqm文件操作大全,文件操作demo
今天 south eth 1.8 get pri pos nis gravity 近期在論壇中看到。在使用html5中上傳圖片或文件,出現各種問題。這一方面,我也一直沒有做過,今天就抽出了一點時間來學習一下。如今的演示樣例已經ok了,我就給大家分享一下,希望對大家有幫助
第3天:CSS浮動、定位、表格、表單總結
特性 input 器) 用戶 style line ie瀏覽器 練習 doctype 今天學的是浮動、定位、表格、表單等內容,這些是CSS中最容易混淆的知識,有許多小技巧在寫代碼過程中需要註意。下面是主要知識點: 一、float浮動1、塊元素在一行顯示2、內聯元素支持寬高3
Flask10 登錄模塊、表單框架、表單渲染、表單驗證、bookie、請求之前鉤子、g對象、編寫裝飾器
data 函數實現 https tid 路徑 錯誤 post請求 字符 als from flask import Flask from flask import request from flask import render_template from flask_
JavaScript基礎 -- 常見DOM樹操作
tle rep Language ron -s name 增加 lan scrip 1.創建並增加元素節點 <ul id="ul"> <li>1</li> <li>2</li> <li>3</
angular 表單操作
對象 用戶 loop 自動 .class 按鍵事件 有關 狀態 。。 一直沒有使用angular的表單驗證以及表單提交數據。只是用的input綁定值,另外最近的設計都是點擊後顯示錯誤,而不是自動顯示錯誤。所以錯誤顯示一直也沒有做。而表單的非法驗證可以直接解決這個問題。a
MySQL用戶、庫、表的操作語法 關於用戶的語法
MySQL數據庫MySQL用戶、庫、表的操作語法 關於用戶的語法 查看當前系統裏的用戶: select user,host from mysql.user; 查看當前登陸的用戶 select user(); 創建用戶 語法:create user ‘用戶‘@‘主機‘ identified by ‘密碼‘;
用javascript編寫地區表單ES6
onchange 淮安 ava 滄州 initial 泉州 pan 張家界 清空 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta cha
HTML5(二)——特殊符號、新增屬性、表單重寫屬性、
枚舉值 mac a-z nova ride prevent edit wid inf 一、HTML5 特殊符號   :空格 >:大於號 > &It :小於號 < " :引號”