ホームページ > ウェブフロントエンド > jsチュートリアル > 入力時間を制御する JavaScript メソッド format_javascript スキル

入力時間を制御する JavaScript メソッド format_javascript スキル

WBOY
リリース: 2016-05-16 16:17:30
オリジナル
1681 人が閲覧しました

この記事の例では、JavaScript で入力時刻の形式を制御する方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

以前、主にkeydownイベントとkeyupイベントを使ってJavascript制御時間形式の入力を作ったのですが、非常に書き方が複雑でバグもあると感じていました。

今日はキープレスイベント、キーダウンとキーアップの違いについて学びました。おおよそ以下のような感じです(今のところこれくらいしか分かりません):

keydown: キーが押されたときにトリガーされ、イベントを通じて keyCode を取得でき、テキスト ボックスが入力される前の値を取得できます。

keyup: キーがポップアップされた (解放された) ときにトリガーされ、イベントを通じて keyCode を取得でき、テキスト ボックスへの入力後の値を取得できます。

keypress:

このイベントは Chrome と IE で基本的に同じですが、Firefox では少し異なります。 1. Chrome および IE: 押されたキーがテキスト ボックスに文字を表示できる限り、キーコードがトリガーされます (文字、数字、記号などの入力)。また、event.key は未定義です。出現できない文字 (矢印キー、Home、Backspace など) はトリガーされません。

2. Firefox の場合: 文字、数字、記号、方向、バックスペース、その他のキーをトリガーでき、キー名は押されたキーが文字を出力できる場合、event.keyCode は 0 です。文字が出力できない場合、event.keyCodeは対応するASCIIコードです

トピックに戻り、コードを直接見てみましょう (上記のイベントは、以下のコードの e に相当します)。

コードをコピー コードは次のとおりです。var isFF = /firefox/i.test(navigator.ユーザーエージェント); $("入力").on({
キーアップ : 関数 (e) {
!/^[d:] $/.test(e.target.value) && (e.target.value = "");
}、
キープレス: function (e) {
If (isFF && e.keyCode !== 0) {
/// Firefox では任意のキーを押すと keypress イベントがトリガーされますが、IE/Chrome では文字を出力できるキーを押すだけで
がトリガーされます /// Firefox の場合、e.keyCode!==0 は、Backspace、方向、ホームなどのキーのいずれかが押されたことを意味します
} else {
If (e.target.value.length > 7)
return false;
If (/d{2}$/.test(e.target.value)) {
e.target.value = ':';
}
var char = String.fromCharCode(e.keyCode === 0 ? e.that : e.keyCode);
If (!/^d/.test(char))
return false;
}
}
});


Firefox で文字を出力できるキーと文字を出力できないキーを区別するには、isFF && e.keyCode !== 0 を使用します。Firefox の e.keyCode では値が取得できない場合がありますので、e.that を指定します。代わりに使用されます。
keyup は、入力方法を使用するときに中国語や文字を入力できないという問題を解決するために使用されます。

String.fromCharCode() を通じて ASCII コードに対応する文字を取得します。

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート