網頁

JavaScript - 表單元素 - Input Element

form表單input元素


JavaScript form表單input元素屬性
名稱說明
form取得input屬於那一個form
namename屬性
type類型
value設定或取得input的值,除下拉式功能表以外
accessKey此input的快捷鍵
accept顯示伺服器支援的ContentType清單
defaultValue設定或取得input的預設值
disabled設定input是否有作用,true為沒作用
tabIndex設定Tab鍵切換順序

JavaScript form表單input元素文字
名稱說明
maxLength設定或取得input最大字元數
readOnly設定或取得input是否是一個唯讀input,true為是
size設定或取得input的尺寸

disabled與readOnly


  • disable會使欄位無效,內容值無法傳送或讀取
  • readOnly會使欄位唯讀,但內容可傳送或讀取

JavaScript form表單input元素方法
名稱說明
blur()設定input失去處理權
focus()設定input擁有處理權
select()選取input,使用反白顯示文字內容,只可以使用在文字欄位
click()觸發onclick事件,button、checkbox、radio、reset、submit

如果使用input方法選擇文字欄位,需同時使用select()與focus(),欄位內容才會反白與取得處理權,例如,

obj.select();
obj.focus(); 

在button中使用submit()


<input type="button" value="Submit" onclick="document.forms["form1"].submit();" /> 

如果使用submit()方法來提交表單,不會觸發<form>的onsubmit()事件,這點與<input type="submit />或<input type="image" />提交按鈕不同。

防止使用者重覆按下提交按鈕


<input type="button" value="Submit" onclick="this.disabled=true;this.form.submit();" /> 

滑鼠經過時自動選擇文字


  • 在滑鼠經過時onmouseover="this.focus()";
  • 在取得處理權後,選取文字,onfocus="this.select()";

沒有留言:

張貼留言

感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「分享」它,我會很高興的。