HTMLInputElement
åºçº¿
广æ³å¯ç¨
*
èª 2015å¹´7æ èµ·ï¼æ¤ç¹æ§å·²å¨ä¸»æµæµè§å¨ä¸å¾å°æ¯æï¼å¯å¨å¤§å¤æ°è®¾å¤åæµè§å¨çæ¬ä¸æ£å¸¸ä½¿ç¨ã
* æ¤ç¹æ§çæäºé¨åçæ¯æç¨åº¦å¯è½ææä¸åã
HTMLInputElement æ¥å£æä¾äºç¹å®ç屿§åæ¹æ³ï¼ç¨äºç®¡ç <input> å
ç´ çé项ãå¸å±åå¤è§ã
å®ä¾å±æ§
è¿ä»å
¶ç¶æ¥å£ HTMLElement ç»§æ¿å±æ§ã
æäºå±æ§ä» éç¨äºæ¯æç¸åºå±æ§çè¾å ¥å ç´ ç±»åã
align-
ä¸ä¸ªè¡¨ç¤ºå ç´ å¯¹é½æ¹å¼çå符串ã请æ¹ç¨ CSSã
defaultValue-
ä¸ä¸ªè¡¨ç¤ºå ç´ é»è®¤å¼çå符串ï¼è¯¥å¼æåæ¯å¨å建æ¤å¯¹è±¡ç HTML 䏿å®çã
dirName-
ä¸ä¸ªè¡¨ç¤ºå ç´ æ¹åçå符串ã
incremental-
ä¸ä¸ªè¡¨ç¤ºæç´¢äºä»¶è§¦å模å¼çå¸å°å¼ï¼å¦æä¸º
trueï¼å卿¯æ¬¡æé®æåå»åæ¶æé®æ¶è§¦åï¼å¦åå¨æä¸ Enter 鮿¶è§¦åã labelsåªè¯»-
è¿åä¸ä¸ª
<label>å ç´ çå表ï¼è¿äºå ç´ æ¯å½åå ç´ çæ ç¾ã liståªè¯»-
è¿åç±
list屿§æåçå ç´ ã妿å¨å䏿 䏿¾ä¸å° HTML å ç´ ï¼åè¯¥å±æ§å¯è½ä¸ºnullã multiple-
ä¸ä¸ªè¡¨ç¤ºå ç´ ç
multiple屿§çå¸å°å¼ï¼è¡¨ç¤ºæ¯å¦å¯è½æå¤ä¸ªå¼ï¼ä¾å¦ï¼å¤ä¸ªæä»¶ï¼ã name-
ä¸ä¸ªè¡¨ç¤ºå ç´ ç
name屿§çå符串ï¼å å«å¨æäº¤è¡¨åæ¶æ è¯å ç´ çåç§°ã popoverTargetAction-
è·åæè®¾ç½®è¦å¨ç±
type="button"ç<input>å ç´ æ§å¶çå¼¹åºçªå£å ç´ ä¸æ§è¡çæä½ï¼"hide"ã"show"æ"toggle"ï¼ãå®åæ äºpopovertargetactionHTML 屿§çå¼ã popoverTargetElement-
è·åæè®¾ç½®è¦éè¿
type="button"ç<input>å ç´ æ§å¶çå¼¹åºçªå£å ç´ ãå®åæ äºpopovertargetHTML 屿§çå¼ã step-
ä¸ä¸ªè¡¨ç¤ºå ç´ ç
step屿§çå符串ï¼å®ä¸minåmaxä¸èµ·ä½¿ç¨ï¼ä»¥éå¶å¯ä»¥è®¾ç½®æ°åææ¥ææ¶é´å¼çå¢éãå®å¯ä»¥æ¯å符串anyææ£æµ®ç¹æ°ã妿ä¸è®¾ç½®ä¸ºanyï¼åæ§ä»¶ä» æ¥åå¤§äºæå°å¼çæ¥é¿å¼çåæ°ã type-
ä¸ä¸ªè¡¨ç¤ºå ç´ ç
type屿§çå符串ï¼è¡¨ç¤ºè¦æ¾ç¤ºçæ§ä»¶ç±»åã请åétype屿§çææ¡£ï¼ä»¥äºè§£å ¶å¯è½çå¼ã useMap-
ä¸ä¸ªè¡¨ç¤ºå®¢æ·ç«¯å¾åæ å°çå符串ã
value-
ä¸ä¸ªè¡¨ç¤ºæ§ä»¶å½åå¼çå符串ãå¦æç¨æ·è¾å ¥ä¸é¢æä¸åçå¼ï¼åå¯è½è¿å空å符串ã
valueAsDate-
ä¸ä¸ªè¡¨ç¤ºå ç´ çå¼ç
Dateï¼ä»¥æ¥æå½¢å¼è§£éï¼å¦ææ æ³è½¬æ¢ï¼å为nullã valueAsNumber-
ä¸ä¸ªè¡¨ç¤ºå ç´ çå¼çæ°åï¼ä»¥ä»¥ä¸é¡ºåºè§£éï¼æ¶é´å¼ãæ°åæ
NaNï¼å¦ææ æ³è½¬æ¢ï¼ã
ä¸ç¶è¡¨åç¸å ³çå®ä¾å±æ§
formåªè¯»-
è¿åä¸ä¸ªç¶è¡¨åï¼
<form>ï¼å ç´ çå¼ç¨ã formAction-
ä¸ä¸ªè¡¨ç¤ºå ç´ ç
formaction屿§çå符串ï¼å å«å¤çå ç´ æäº¤ä¿¡æ¯ç¨åºç URIãè¿ä¼è¦çç¶è¡¨åçaction屿§ã formEnctype-
ä¸ä¸ªè¡¨ç¤ºå ç´ ç
formenctype屿§çå符串ï¼å å«å°è¡¨åæäº¤å°æå¡å¨çå 容类åãè¿ä¼è¦çç¶è¡¨åçenctype屿§ã formMethod-
ä¸ä¸ªè¡¨ç¤ºå ç´ ç
formmethod屿§çå符串ï¼å 嫿µè§å¨ç¨äºæäº¤è¡¨åç HTTP æ¹æ³ãè¿ä¼è¦çç¶è¡¨åçmethod屿§ã formNoValidate-
ä¸ä¸ªè¡¨ç¤ºå ç´ ç
formnovalidate屿§çå¸å°å¼ï¼è¡¨ç¤ºå¨æäº¤è¡¨åæ¶ä¸å¯¹å ¶è¿è¡éªè¯ãè¿ä¼è¦çç¶è¡¨åçnovalidate屿§ã formTarget-
ä¸ä¸ªè¡¨ç¤ºå ç´ ç
formtarget屿§çå符串ï¼å å«ä¸ä¸ªåç§°æå ³é®åï¼è¡¨ç¤ºå¨æäº¤è¡¨å忥æ¶ååºçæ¾ç¤ºä½ç½®ãè¿ä¼è¦çç¶è¡¨åçtarget屿§ã
éç¨äºä»»ä½ç±»åçééèè¾å ¥å ç´ çå®ä¾å±æ§
disabled-
ä¸ä¸ªè¡¨ç¤ºå ç´ ç
disabled屿§çå¸å°å¼ï¼è¡¨ç¤ºè¯¥æ§ä»¶ä¸å¯ç¨äºäº¤äºãè¾å ¥å¼å°ä¸ä¼ä¸è¡¨åä¸èµ·æäº¤ãåè§readonlyã required-
ä¸ä¸ªè¡¨ç¤ºå ç´ ç
required屿§çå¸å°å¼ï¼è¡¨ç¤ºç¨æ·å¿ é¡»å¨æäº¤è¡¨åä¹åå¡«åå¼ã validationMessageåªè¯»-
è¿å䏿¡æè¿°æ§ä»¶ä¸æ»¡è¶³æ¶çéªè¯çº¦æçæ¬å°åæ¶æ¯ã妿æ§ä»¶ä¸æ¯çº¦æéªè¯çåé项ï¼
willValidate为falseï¼ï¼æè 宿»¡è¶³å ¶çº¦æï¼å为空åç¬¦ä¸²ãæ¤å¼å¯ä»¥éè¿setCustomValidity()æ¹æ³è®¾ç½®ã validityåªè¯»-
è¿åå ç´ å½åçææç¶æã
willValidateåªè¯»-
è¿åå ç´ æ¯å¦æ¯çº¦æéªè¯çåé项ã妿任使¡ä»¶é»æ¢å®è¿è¡çº¦æéªè¯ï¼å为
falseï¼å æ¬ï¼å®çtypeæ¯hiddenãresetæbuttonä¹ä¸ï¼å®çç¥å 䏿<datalist>æè å®çdisabled屿§ä¸ºtrueã
ä» éç¨äºå¤éæ¡ååéæé®å ç´ çå®ä¾å±æ§
checked-
ä¸ä¸ªè¡¨ç¤ºå ç´ å½åç¶æçå¸å°å¼ã
defaultChecked-
ä¸ä¸ªè¡¨ç¤ºåéæé®æå¤éæ¡çé»è®¤ç¶æçå¸å°å¼ï¼è¯¥å¼æåæ¯å¨å建æ¤å¯¹è±¡ç HTML 䏿å®çã
indeterminate-
ä¸ä¸ªè¡¨ç¤ºå¤éæ¡æåéæé®æ¯å¦å¤äºä¸ç¡®å®ç¶æçå¸å°å¼ã对äºå¤éæ¡ï¼æææ¯å¤éæ¡çå¤è§è¢«æç§æ¹å¼é®æ¡/åç°ï¼ä»¥è¡¨ç¤ºå ¶ç¶ææ¯ä¸ç¡®å®çï¼æ¢ä¸éä¸ä¹ä¸æªéä¸ï¼ãä¸ä¼å½±å
checked屿§çå¼ï¼åå»å¤éæ¡å°å ¶å¼è®¾ç½®ä¸ºåã
ä» éç¨äºå¾åç±»åçå ç´ çå®ä¾å±æ§
alt-
ä¸ä¸ªè¡¨ç¤ºå ç´ ç
alt屿§çå符串ï¼å å«è¦ä½¿ç¨çæ¿ä»£ææ¬ã height-
ä¸ä¸ªè¡¨ç¤ºå ç´ ç
height屿§çå符串ï¼å å«è¦æ¾ç¤ºä¸ºæé®çå¾åçé«åº¦ã src-
ä¸ä¸ªè¡¨ç¤ºå ç´ ç
src屿§çå符串ï¼å å«è¦æ¾ç¤ºä¸ºå¾å½¢æäº¤æé®ä¸çå¾åçä½ç½®ç URIã width-
ä¸ä¸ªè¡¨ç¤ºå ç´ ç
width屿§çå符串ï¼å å«è¦æ¾ç¤ºä¸ºæé®çå¾åç宽度ã
ä» éç¨äºæä»¶ç±»åçå ç´ çå®ä¾å±æ§
accept-
ä¸ä¸ªè¡¨ç¤ºå ç´ ç
accept屿§çå符串ï¼å å«å¯ä»¥éæ©çæä»¶ç±»åç以éå·åéçå表ã files-
ä¸ä¸ª
FileListï¼è¡¨ç¤ºéæ©çè¦ä¸ä¼ çæä»¶ã webkitdirectory-
ä¸ä¸ªè¡¨ç¤º
webkitdirectory屿§çå¸å°å¼ãå¦æä¸ºtrueï¼åæä»¶ç³»ç»éæ©å¨æ¥å£ä» æ¥åç®å½è䏿¯æä»¶ã webkitEntriesåªè¯»-
æè¿°å½åéæ©çæä»¶æç®å½ã
ä» éç¨äºå å«ææ¬ææ°åçå¯è§å ç´ çå®ä¾å±æ§
autocomplete-
ä¸ä¸ªè¡¨ç¤ºå ç´ ç
autocomplete屿§çå符串ï¼è¡¨ç¤ºæ§ä»¶ç弿¯å¦å¯ä»¥ç±æµè§å¨èªå¨å¡«å ã capture-
ä¸ä¸ªè¡¨ç¤ºå ç´ ç
capture屿§çåç¬¦ä¸²ï¼æç¤ºæä»¶ä¸ä¼ æ§ä»¶ä¸çåªä½æè·è¾å ¥æ¹æ³ã max-
ä¸ä¸ªè¡¨ç¤ºå ç´ ç
max屿§çå符串ï¼å 嫿¤é¡¹çæå¤§ï¼æ°åææ¥ææ¶é´ï¼å¼ï¼è¯¥å¼ä¸è½å°äºå ¶æå°ï¼min屿§ï¼å¼ã maxLength-
ä¸ä¸ªè¡¨ç¤ºå ç´ ç
maxlength屿§çæ°åï¼å å«å¼å¯ä»¥å ·æçæå¤§å符æ°ï¼ä»¥ Unicode ç ç¹è¡¨ç¤ºï¼ã min-
ä¸ä¸ªè¡¨ç¤ºå ç´ ç
min屿§çå符串ï¼å 嫿¤é¡¹çæå°ï¼æ°åææ¥ææ¶é´ï¼å¼ï¼è¯¥å¼ä¸è½å¤§äºå ¶æå¤§ï¼max屿§ï¼å¼ã minLength-
ä¸ä¸ªè¡¨ç¤ºå ç´ ç
minlength屿§çæ°åï¼å å«å¼å¯ä»¥å ·æçæå°å符æ°ï¼ä»¥ Unicode ç ç¹è¡¨ç¤ºï¼ã pattern-
ä¸ä¸ªè¡¨ç¤ºå ç´ ç
pattern屿§çå符串ï¼å å«è¦æ£æ¥æ§ä»¶å¼çæ£å表达å¼ã使ç¨title屿§æ¥æè¿°æ¨¡å¼ä»¥å¸®å©ç¨æ·ãæ¤å±æ§ä» éç¨äºtype屿§çå¼ä¸ºtextãsearchãtelãurlæemailçæ åµã placeholder-
ä¸ä¸ªè¡¨ç¤ºå ç´ ç
placeholder屿§çå符串ï¼å å«ä¸ä¸ªæç¤ºï¼åè¯ç¨æ·å¯ä»¥å¨æ§ä»¶ä¸è¾å ¥ä»ä¹ãå ä½ç¬¦ææ¬ä¸è½å å«åè½¦ææ¢è¡ç¬¦ãæ¤å±æ§ä» éç¨äºtype屿§çå¼ä¸ºtextãsearchãtelãurlæemailçæ åµã readOnly-
ä¸ä¸ªè¡¨ç¤ºå ç´ ç
readonly屿§çå¸å°å¼ï¼æç¤ºç¨æ·æ æ³ä¿®æ¹æ§ä»¶çå¼ã妿type为hiddenãrangeãcolorãcheckboxãradioãfileææé®ç±»åï¼åå¿½ç¥æ¤å±æ§ã selectionDirection-
ä¸ä¸ªè¡¨ç¤ºéæ©åççæ¹åçå符串ãå¯è½çå¼ä¸ºï¼
forwardï¼éæ©æ¯ä»å½ååºå设置çèµ·å§å°ç»ææ¹å䏿§è¡çï¼ãbackwardï¼ç¸åçæ¹åï¼ænoneï¼æ¹åæªç¥ï¼ã selectionEnd-
ä¸ä¸ªè¡¨ç¤ºéæ©ææ¬çç»æç´¢å¼çæ°åã彿²¡æéæ©æ¶ï¼å®è¿åå½åææ¬è¾å ¥å æ ä½ç½®åé¢çå符çåç§»éã
selectionStart-
ä¸ä¸ªè¡¨ç¤ºéæ©ææ¬çå¼å§ç´¢å¼çæ°åã彿²¡æéæ©æ¶ï¼å®è¿åå½åææ¬è¾å ¥å æ ä½ç½®çåç§»éã
size-
ä¸ä¸ªè¡¨ç¤ºå ç´ ç
size屿§çæ°åï¼å 嫿§ä»¶çå¯è§å¤§å°ãæ¤å¼ä»¥åç´ ä¸ºåä½ï¼é¤étypeçå¼ä¸ºtextæpasswordï¼å¨è¿ç§æ åµä¸ï¼å®æ¯ä¸ä¸ªæ´æ°å符æ°ãä» å½type设置为textãsearchãtelãurlãemailæpasswordæ¶æéç¨ã
å®ä¾æ¹æ³
ä¹ä»å
¶ç¶æ¥å£ HTMLElement ç»§æ¿æ¹æ³ã
checkValidity()-
è¿åä¸ä¸ªå¸å°å¼ï¼å¦æå ç´ æ¯çº¦æéªè¯çåé项ï¼å¹¶ä¸å®ä¸æ»¡è¶³å ¶çº¦æï¼å为
falseãå¨è¿ç§æ åµä¸ï¼å®è¿ä¼å¨å ç´ ä¸è§¦åinvalidäºä»¶ã妿å ç´ ä¸æ¯çº¦æéªè¯çåéé¡¹ï¼æè 宿»¡è¶³å ¶çº¦æï¼åè¿åtrueã reportValidity()-
è¿è¡
checkValidity()æ¹æ³ï¼å¦æå®è¿å falseï¼å¯¹äºæ æè¾å ¥ææªæä¾æ¨¡å¼å±æ§ï¼ï¼åä»¥ä¸æäº¤è¡¨åç¸åçæ¹å¼åç¨æ·æ¥åè¾å ¥æ æã select()-
éæ©è¾å ¥å ç´ ä¸çææææ¬ï¼å¹¶å°å ¶èç¦ï¼ä»¥ä¾¿ç¨æ·éåå¯ä»¥æ¿æ¢å ¶ææå 容ã
setCustomValidity()-
设置å ç´ çèªå®ä¹æææ§æ¶æ¯ãå¦ææ¤æ¶æ¯ä¸æ¯ç©ºå符串ï¼åå ç´ åå¨èªå®ä¹æææ§é误ï¼ä¸å ¶å¼æ æã
setRangeText()-
æ¿æ¢è¾å ¥å ç´ ä¸ç䏿®µææ¬ä¸ºæ°ææ¬ã
setSelectionRange()-
éæ©è¾å ¥å ç´ ä¸ç䏿®µææ¬ï¼ä½ä¸èç¦ï¼ã
showPicker()-
æ¾ç¤ºæµè§å¨çæ¥æãæ¶é´ãé¢è²åæä»¶éæ©å¨ã
stepDown()-
æ
step* n éåvalueï¼å ¶ä¸ n é»è®¤ä¸º 1ï¼å¦ææªæå®ï¼ã stepUp()-
æ
step* n éå¢valueï¼å ¶ä¸ n é»è®¤ä¸º 1ï¼å¦ææªæå®ï¼ã
äºä»¶
ä¹ä»å
¶ç¶æ¥å£ HTMLElement ç»§æ¿äºä»¶ã
ä½¿ç¨ addEventListener() æéè¿å°äºä»¶çå¬å¨èµå¼ç»æ¤æ¥å£ç oneventname 屿§æ¥çå¬è¿äºäºä»¶ï¼
è§è
| è§è |
|---|
| HTML > # htmlinputelement > |
æµè§å¨å ¼å®¹æ§
åè§
- å®ç°äºè¯¥æ¥å£ç HTML å
ç´ ï¼
<input>