昨日、ブロガーはフォームフォームにいくつかの入力ボックスがあるとのリクエストを受け取りました。たとえば、制限する必要があります。たとえば、テキストや英語を入力することはできず、数字だけを入力できるようにする制限があります。
この機能を実現する2つの方法を提供します。もちろん、ここで現象を説明します。
1.多くのフロントエンドフレームワークにサードパーティのコンポーネントライブラリが統合されていると思います。ここで、私のプロジェクトで使用されているiviewの例をいくつか示します。
iviewには数値入力テキストボックスがあります。<InputNumber :max="10" :min="1" v-model="value1"></InputNumber>
これは最も簡単な方法ですが、多くの場合、スタイルやその他の要因により、コンポーネントライブラリのアクティブなコンポーネント関数を使用できません。ここで、2番目の方法を提供します
2.正規表現の判定方法
2番目の方法は、正規表現の判断です。oninput="this.value=this.value.replace(/^\D*([0-9]\d*\.?\d*)?.*$/,'$1')"
注：正規表現の判定方法は、ネイティブの入力入力ボックスを使用する必要があり、iviewの入力ボックスまたは要素の入力ボックスは効果がないはずです。
この正規表現の意味は、英語とテキストの入力になりました
あなたはパラメータoninputを見ることができます、私はあなたに説明します：
マウスイベント
- onclick：ユーザーがオブジェクトをクリックしたときに呼び出されるイベントハンドラー。
- oncontextmenu：ユーザーがマウスの右ボタンをクリックしてコンテキストメニューを開いたときにトリガーされます
- ondblclick：ユーザーがオブジェクトをダブルクリックしたときに呼び出されるイベントハンドラ。
- onmousedown：マウスボタンが押されました。
- onmouseenter：マウスポインターが要素の上に移動するとトリガーされます
- onmouseleave：マウスポインターが要素の外に移動するとトリガーされます
- onmousemove：マウスが移動しました。
- onmouseover：要素の上にマウスを置きます。
- onmouseout：マウスが要素から離れます。
- onmouseup：マウスボタンが離されました。
キーボードイベント
- onkeydown：キーボードのキーが押されました。
- onkeypress：キーボードのキーが押されて離された
- onkeyup：キーボードのキーが離されました。
フレーム/オブジェクトイベント
- onabort：画像の読み込みが中断されました。（）
- onbeforeunload：このイベントは、ページが離れようとしているときにトリガーされます（更新または閉じる）
- onerror：ドキュメントまたは画像の読み込み中にエラーが発生しました。（、そして）
- onhashchangeこのイベントは、現在のURLのアンカー部分が変更されるとトリガーされます。
- onloadページまたは画像が読み込まれます。
- onpageshowこのイベントは、ユーザーがページにアクセスしたときにトリガーされます
- onpagehideこのイベントは、ユーザーが現在のページを離れて別のページにジャンプしたときにトリガーされます
- onresizeウィンドウまたはフレームのサイズが変更されます。
- onscrollドキュメントがスクロールされたときに発生するイベント。
- onunloadユーザー出口ページ。（そして）
フォームイベント
- onblur：要素がフォーカスを失ったときにトリガーされます
- onchange：このイベントは、フォーム要素のコンテンツが変更されたときにトリガーされます（、、および）
- onfocus：要素がフォーカスを取得したときにトリガーされます
- onfocusin：要素がフォーカスを取得しようとしているときにトリガーされます
- onfocusout：要素がフォーカスを失う直前にトリガーされます
- oninput：要素がユーザー入力を取得したときにトリガーされます
- onreset：フォームがリセットされたときにトリガーされます
- onsearch：ユーザーが検索フィールドにテキストを入力するとトリガーされます（<input =“ search”>）
- onselect：ユーザーがテキスト（および）を選択するとトリガーされます
- onsubmit：フォームが送信されるとトリガーされます
クリップボードイベント
- oncopy：このイベントは、ユーザーが要素のコンテンツをコピーしたときにトリガーされます
- oncut：このイベントは、ユーザーが要素のコンテンツをカットしたときにトリガーされます
- onpaste：このイベントは、ユーザーが要素のコンテンツを貼り付けたときにトリガーされます
イベントを印刷する
- onafterprint：このイベントは、ページの印刷が開始されたとき、または印刷ウィンドウが閉じられたときにトリガーされます
- onbeforeprint：このイベントは、ページが印刷を開始しようとするとトリガーされます
ドラッグイベント
- ondrag：このイベントは、要素がドラッグされているときにトリガーされます
- ondragend：このイベントは、ユーザーが要素のドラッグを終了するとトリガーされます
- ondragenter：このイベントは、ドラッグされた要素がドロップターゲットに入るとトリガーされます
- ondragleave：このイベントは、ドラッグ要素がドロップターゲットを離れるとトリガーされます
- ondragover：このイベントは、ドラッグ要素がターゲットに配置されたときにトリガーされます
- ondragstart：このイベントは、ユーザーが要素のドラッグを開始するとトリガーされます
- ondrop：このイベントは、ドラッグ要素がターゲット領域に配置されるとトリガーされます
マルチメディアイベント
- onabort：ビデオ/オーディオ（オーディオ/ビデオ）の読み込みが終了すると、イベントがトリガーされます。
- oncanplay：イベントは、ユーザーがビデオ/オーディオ（オーディオ/ビデオ）の再生を開始できるときにトリガーされます。
- oncanplaythrough：一時停止やバッファリングなしでオーディオ/ビデオを正常に再生できるときに、イベントがトリガーされます。
- ondurationchange：オーディオ/ビデオの期間が変化すると、イベントがトリガーされます。
- onemptied：現在のプレイリストが空のときにトリガーされます
- onended：イベントは、オーディオ/ビデオ再生の終了時にトリガーされます。
- onerror：イベントは、オーディオ/ビデオデータのロード中にエラーが発生したときにトリガーされます。
- onloadeddata：このイベントは、ブラウザーがビデオ/オーディオ（オーディオ/ビデオ）の現在のフレームをロードしたときにトリガーされます。
- onloadedmetadata：イベントは、指定されたビデオ/オーディオ（オーディオ/ビデオ）のメタデータが読み込まれた後にトリガーされます。
- onloadstart：イベントは、ブラウザーが指定されたビデオ/オーディオ（オーディオ/ビデオ）の検索を開始するとトリガーされます。
- onpause：イベントは、オーディオ/ビデオが一時停止するとトリガーされます。
- onplay：オーディオ/ビデオの再生が開始すると、イベントがトリガーされます。
- onplaying：イベントは、オーディオ/ビデオが一時停止されたとき、またはバッファリング後に再生を再開する準備ができたときにトリガーされます。
- onprogress：イベントは、ブラウザーが指定されたビデオ/オーディオ（オーディオ/ビデオ）をダウンロードしたときにトリガーされます。
- onratechange：オーディオ/ビデオの再生速度が変化すると、イベントがトリガーされます。
- onseeked：ユーザーがオーディオ/ビデオの再生位置を再配置した後にイベントがトリガーされます。
- onseeking：ユーザーがオーディオ/ビデオの再配置を開始すると、イベントがトリガーされます。
- onstalled：ブラウザがメディアデータを取得したときにイベントがトリガーされましたが、メディアデータが利用できません。
- onsuspend：イベントは、メディアデータの読み取りが中断されたときにトリガーされます。
- ontimeupdate：現在の再生位置が変更を送信すると、イベントがトリガーされます。
- onvolumechange：音量が変化するとイベントがトリガーされます。
- onwaiting：次のフレームが再生されているためにビデオをバッファリングする必要があるときに、イベントがトリガーされます。
アニメーションイベント
- animationend：このイベントは、CSSアニメーションが終了するとトリガーされます
- animationiteration：このイベントは、CSSアニメーションが繰り返し再生されるときにトリガーされます
- animationstart：このイベントは、CSSアニメーションの再生が開始されるとトリガーされます
移行イベント
- transitionend：このイベントは、CSSが移行を完了した後にトリガーされます。
その他のイベント
- onmessage：このイベント
は、オブジェクト（WebSocket、Webワーカー、イベントソース、または子フレームまたは親ウィンドウ）を介して、またはオブジェクトからメッセージを受信したときにトリガーされます - onmousewheel：廃止されました。代わりにonwheelイベントを使用してください
- ononline：このイベントは、ブラウザーがオンラインで動作を開始するとトリガーされます。
- onoffline：このイベントは、ブラウザーがオフラインで作業を開始するとトリガーされます。
- onpopstate：このイベントは、ウィンドウの閲覧履歴（履歴オブジェクト）が変更されるとトリガーされます。
- onshow：イベントが発生したとき
- onstorage：このイベントは、Webストレージ（HTML 5 Webストレージ）が更新されるとトリガーされます
- ontoggle：このイベントは、ユーザーが要素を開いたり閉じたりしたときにトリガーされます
- onwheel：このイベントは、マウスホイールが要素を上下にスクロールするとトリガーされます
私は皆のためのすべてのイベントをリストしました、あなたがまだ理解することをお勧めします、ブロガーはonkeyupイベントを使い始めたばかりです、そして後でMacが数字だけの入力を制限するために入力入力ボックスを達成できることがわかりました、しかし通常のWindowsシステムコンピュータで、漢字を入力してEnterキーを押すと、英語を入力できます。テストを繰り返した後、oninputが要求を満たしていることがわかりますが、Macには少し点滅する効果が表示され、操作には影響しません。
