jQuery は単純な日付入力フォーマット control_jquery を実装します

js コードは 100 行以上あります。

まずはレンダリング

HTML コード

日付:

入力要素のクラス名を hhm-dateInputer に設定し、このクラスを使用して日付入力コントロールをバインドします。

js コード

ここでは jQuery ライブラリが使用されており、主に要素の選択とイベントのバインドに使用されます。

コードをコピーします コードは次のとおりです: http://code.jquery.com/jquery-1.9.1.min.js"> > カーソル位置の取得や設定は操作が多いため、前回のブログで紹介したツール関数をいくつか使用します。

コードをコピーします コードは次のとおりです: //カーソル位置を取得 function getCursor(elem) { //IE 9、10、その他のブラウザ If (elem.selectionStart !== 未定義) { return elem.selectionStart; } else { //IE 6,7,8 var range = document.selection.createRange(); range.moveStart("character", -elem.value.length); var len = range.text.length; return len; } } //カーソル位置を設定 function setCursor(elem,index) { //IE 9、10、その他のブラウザ If (elem.selectionStart !== 未定義) { elem.selectionStart =index; elem.selectionEnd =index; } else { //IE 6,7,8 var range = elem.createTextRange(); Range.moveStart("character", -elem.value.length); //左端を開始点に移動します range.move("character",index) //カーソルはインデックス位置に配置されます range.select(); } } //選択されたテキストを取得します function getSelection(elem) { //IE 9、10、その他のブラウザ If (elem.selectionStart !== 未定義) { return elem.value.substring(elem.selectionStart, elem.selectionEnd); } else { //IE 6,7,8 var range = document.selection.createRange(); return range.text; } } //選択範囲を設定 function setSelection(elem, leftIndex, rightIndex) { If (elem.selectionStart !== unknown) { //IE 9、10、その他のブラウザ elem.selectionStart = leftIndex; elem.selectionEnd = rightIndex; } else { //IE 6,7,8 var range = elem.createTextRange(); range.move("character", -elem.value.length); //カーソルは位置 0 に移動します。 //ここでは最初に moveEnd を指定し、次に moveStart を指定する必要があります //左の境界線が右の境界線より大きく設定されている場合、ブラウザは自動的に右の境界線を左の境界線と同じにするためです。 range.moveEnd("character", rightIndex); range.moveStart("character", leftIndex); range.select(); } } ------------------------- ---

最初に主なアイデアについて話しましょう。 実はここで絵を描くことができるのですが、どうやって描いたらいいのかわかりません。ご意見をお聞かせください。

まず、クラス名 hhm-dateInputer の要素を見つけます。

2 つのイベント処理関数をバインドします。キーダウン、フォーカス、ブラー

フォーカス

入力要素の内容が空かどうかを確認し、その初期値を「____-__-__」に設定します

ぼかし (以下のコメント欄の友達からの提案のおかげで、このイベントはさらに完璧になります)

入力要素の内容が初期値 "____-__-__" であるかどうかを判断し、その値を空の "" に設定します

キーダウン

なぜキーアップではなくキーダウンなのか: keydown イベントが発生したとき、キーボード上の文字はまだ入力ボックスに入力されていないことがわかります。これは非常に重要です。必要に応じて、プログラム内での不適切な文字入力を防ぐことができます。

1. まずイベントオブジェクトeventからkeyCodeの値を取得し、数字であると判断したら数字の後ろの下線を1本削除します。 2. keyCode 値がキーの削除を表す場合、番号を削除し、下線を追加します。 3. それ以外の場合、KeyCode は false を返し、文字入力ができなくなります。

setTimeout 関数は、上記の最初と 2 番目の手順で特定の操作を実行するために使用されます。 この関数が使用されるのは、keyup イベントのキー文字が実際にはテキスト ボックスに適用されていないためです。setTimeout の操作でこの問題を解決できます。

さらに、コード内には非常に重要なメソッドresetCursorがあります。このメソッドは、カーソルを適切な入力位置に設定するためにプログラム内で複数回呼び出されます。

コードをコピーします コードは次のとおりです: // カーソルを正しい位置に設定します 関数resetCursor(elem) { var value = elem.value; var インデックス = 値.長さ; //ユーザーがテキストを選択して削除した場合、コンテンツは初期形式にのみ設定できます。 If (elem.value.length !== dateStr.length) { elem.value = dateStr; } //最初の _underline の前にカーソルを置きます // 下線が見つからない場合は最後に挿入します var temp = value.search(/_/); インデックス = 温度 > -1 ? 温度 : インデックス; setCursor(elem,index); } 完全な js コードは以下に掲載されています。

コードをコピー コードは次のとおりです: $(関数(){ var inputs = $(".hhm-dateInputer"); var dateStr = "____-__-__"; inputs.each(function(index,elem){ var input = $(this); input.on("キーダウン",function(event){ var that = this; 現在イベントをトリガーしている入力ボックス。 var key =event.keyCode; varcursorIndex = getCursor(that); に If(キー >= 48 && キー //カーソルが日付の末尾にある場合、またはカーソルの次の文字が「-」の場合、文字が表示されないように false を返します。 If(cursorIndex == dateStr.length || that.value.charAt(cursorIndex) === "-") {return false;} //文字列に下線がない場合はfalseを返す If(that.value.search(/_/) === -1){return false;} var fron = that.value.substring(0,cursorIndex); // カーソルの前のテキスト var reg = /(d)_/; settimeout（function（）{// setimeout の後に文字がテキストに入力されました //カーソルの後のテキスト var end = that.value.substring(cursorIndex,that.value.length); //新しく挿入された数字の後のアンダースコアを削除します_ That.value = fron end.replace(reg,"$1"); resetCursor(that); },1); return true; //「Backspace」削除キー }else if(key == 8){ //カーソルが正面にあるときに削除できません。ただし、すべてのテキストが選択されている場合は削除を検討してください If(!cursorIndex && !getSelection(that).length){ return false;} //削除中に発生したアンダースコアの処理 If(that.value.charAt(cursorIndex -1) == "-"){ var ar = that.value.split(""); ar.splice(cursorIndex-2,1,"_"); That.value = ar.join(""); resetCursor(that); return false; } setTimeout(function(){ //値が空の場合はリセット If(that.value === "") { That.value = "____-__-__"; resetcursor（that）; } //削除された位置に下線が付きます var カーソル = getCursor(that); var ar = that.value.split(""); ar.splice(cursor,0,"_"); That.value = ar.join(""); resetCursor(that); },1); return true; } return false; }); input.on("フォーカス",function(){ If(!this.value){ This.value = "____-__-__"; } resetCursor(this); }); input.on("ぼかし",function(){ If(this.value === "____-__-__"){ This.value = ""; } }); }); // カーソルを正しい位置に設定します 関数resetCursor(elem){ var value = elem.value; varindex = value.length; //ユーザーがテキストを選択して削除した場合、コンテンツは初期形式にのみ設定できます。 If(elem.value.length !== dateStr.length){ elem.value = dateStr; } var temp = value.search(/_/); インデックス = 温度> -1? インデックス; setCursor(elem,index); //最初の _underline の前にカーソルを置きます // 下線が見つからない場合は最後に挿入します } }); 関数 getCursor(elem){ //IE 9、10、その他のブラウザ If(elem.selectionStart !== 未定義){ return elem.selectionStart; } else{ //IE 6,7,8 var range = document.selection.createRange(); range.moveStart("character",-elem.value.length); var len = range.text.length; return len; } } function setCursor(elem,index){ //IE 9、10、その他のブラウザ If(elem.selectionStart !== 未定義){ elem.selectionStart =index; elem.selectionEnd =index; } else{//IE 6,7,8 var range = elem.createTextRange(); Range.moveStart("character",-elem.value.length); //左端を開始点に移動します range.move("character",index) //インデックス位置にカーソルを置きます range.select(); } } 関数 getSelection(elem){ //IE 9、10、その他のブラウザ If(elem.selectionStart !== 未定義){ return elem.value.substring(elem.selectionStart,elem.selectionEnd); } else{ //IE 6,7,8 var range = document.selection.createRange(); return range.text; } } function setSelection(elem,leftIndex,rightIndex){ If(elem.selectionStart !== unknown){ //IE 9、10、その他のブラウザ elem.selectionStart = leftIndex; elem.selectionEnd = rightIndex; } else{//IE 6,7,8 var range = elem.createTextRange(); range.move("character",-elem.value.length); //カーソルは位置 0 に移動します。 //ここでは最初に moveEnd を指定し、次に moveStart を指定する必要があります //左の境界線が右の境界線より大きく設定されている場合、ブラウザは自動的に右の境界線を左の境界線と同じにするためです。 Range.moveEnd("character",rightIndex); Range.moveStart("character",leftIndex); range.select(); } } 結論

このプラグインには、まだ改善が必要な部分がいくつかある可能性があります。

js 呼び出しを介してこのプラグインを要素にバインドするインターフェイスがありません

プラグインにはいくつかのバグがある可能性があります

上記のコードに問題がある場合は、お気軽にお知らせください。

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。