JAvascriptはhtml 5のフォームプロパティに遭遇しました

2816 ワード

inputプロパティ:placeholder:入力ボックスのデフォルト値、説明テキストまたはプロンプト情報をユーザーに表示
Autocomplete:onとoffの値です.onは、フィールドに記入してコミットした後にページに戻り、入力すると以前に入力したものが表示されます.offはオフであり,ユーザ入力データを含むセキュリティである.デフォルトはon autofocus:ページの読み込み時にinputの自動取得フォーカスを設定します.このページには1つのinputのこの属性しか設定できないことに注意してください.複数の設定は設定されていないことに相当します.listプロパティとdatalist:listを使用して入力ボックスにドロップダウンリストを追加します.jsが実装する「自動完了」機能に相当しますが、ファジイクエリはできません.datalist内に「a 34343」と「並24234」の2つの値がある場合、ユーザーは3を入力した後、この2つの値が現れることを望んでいますが、実際には1つも現れません.aを入力すると、ドロップダウンa 34343が現れ、4を入力すると、このドロップダウン値はなくなります.
required:フォームがコミットされる前に要素を入力する必要があります.つまり、空ではありません.プロンプト情報が「このフィールドに入力してください」であるため、プロンプト情報に代わる属性がない限り、使用は推奨されません.pattern:inputラベルに正則を書く場所.typeはemailまたはurlの入力コントロールに関連する正規表現を内蔵しており、valueが正規表現に合致しない場合、フォームは検証に通じず、コミットできません.ヒント情報が固定されているため、typeがemailまたはurlの要素に使用することは推奨されません.正則的に固定されています.jsを直接書き直したほうがいいです.
いくつかの入力設定:rangeUnderflow制限数値コントロールの最小値設定min、input type="number"min="0"value="20"rangeOverflow制限数値コントロールの最大値設定max、input type="number"max="100"value="20"stepMismatch入力値がmin、max、stepの設定max min stepに一致することを確認します. input type="number"min="0"max="100"step="10"value="20"
次はinput=number用の小さな関数です.

function inputV(inpFields,tips){//input     。。0-100.   
/**
* input     。。0-100.   
* range   :  
* if(inputV(v3,msgABC.t4)==false){return false;}
* **/
var km=inpFields[0].validity,v3=inpFields.val();
console.log('    :',km.badInput,'    :',km.rangeOverflow,'     :',km.rangeUnderflow);
if(km.badInput||km.rangeOverflow||km.rangeUnderflow){//a  true 22  true -1    true
alert(tips);
return false;
}
if(isNaN(parseInt(v3))){
console.log('NaN    .     ');
return true;
}
else if(!!isNaN(v3)||parseInt(v3)!=parseFloat(v3)){//    !!isNaN('v3')
alert(tips);
return false;
}
return true;
}


Listプロパティとdatalist:





url:
user:
pwd:
1970
1980
1990
正則:
メールアドレス:アドレス:DATE:TIME:MONTH:週:数字:スライダー検索:色:
フォームの自動入力







出力フォームoutput

以上が本文のすべてですが、お好きになってください.