JavaScript プログラムはどのようにして電話キーの値を取得しますか?-フロントエンドQ&A-php.cn

JavaScript プログラムはどのようにして電話キーの値を取得しますか?

WBOY

リリース： 2023-05-12 10:53:06

オリジナル

649 人が閲覧しました

人々の生活におけるスマートフォンの普及に伴い、ますます多くの Web サイトやアプリケーションがモバイルデバイスに適応し始めています。モバイル端末では、ユーザーの入力方法も従来のコンピューターとは異なります。大きな違いの 1 つは入力方法です。 Web ページやアプリケーションでは、モバイルデバイス上でユーザー入力を処理し、正しいキー値を取得する方法が重要な問題となっています。

JavaScript は、フロントエンドアプリケーションで広く使用されている一般的に使用されるプログラミング言語です。モバイル HTML5 開発プロセスでは、ほとんどのユーザー入力を処理してフィルタリングする必要があります。したがって、モバイルデバイスでキーボード入力を取得する方法を学習することが重要な作業になります。

一般に、コンピュータでは、イベントリスニングを通じてユーザー入力情報を取得します。モバイルデバイスでユーザーのキーボード入力情報を取得するには、次のメソッドを使用できます。

KeyboardEvent

デスクトップブラウザでは、通常、キーボードイベントモニタリングを使用します。キーボードの文字やファンクションキーなどのユーザーのキー値を取得します。同様に、モバイルデバイスでも同様の方法で実現できます。

JavaScript では、Window オブジェクトに「keydown」というイベントリスナーがあり、押されたキーの値を返すことができます。このイベントを使用して、モバイルデバイスでのユーザーのキーストロークを監視できます。

window.addEventListener('keydown', function(event) {
  console.log(event.key);
});

ログイン後にコピー

ユーザーがモバイルデバイスのキーを押すと、このイベントがトリガーされ、押されたキーの値がコンソールに出力されます。この値は、さまざまな論理的判断やデータ処理に簡単に使用できます。

ただし、場合によっては、さらにキー値の情報を取得する必要がある場合があります。モバイルデバイス上のキーボードイベントオブジェクトはデスクトップブラウザのものとは異なることに注意してください。モバイルデバイスでは、キーボードイベントオブジェクトには、Alt、Shift、または Ctrl キーが押されたかどうか、ファンクションキーが押されたかどうかなど、より多くのプロパティが含まれています。

したがって、これらの追加のキー値情報を取得する必要がある場合は、キーボードイベントオブジェクトによって提供される他のプロパティを使用できます。たとえば、 code 属性を使用して、キーに対応するキーコードを取得できます。

window.addEventListener('keydown', function(event) {
  console.log(event.code);
});

ログイン後にコピー

このコードを使用すると、コンソールによって出力される情報で、押されたキーのキーコードを確認できます。このキーコードは、押されたキーに対応する仮想キーの値を表す番号です。この値はキーボード間で一意であり、ユーザーの入力言語やキーボードレイアウトには依存しません。

さらに、KeyEvent の他のプロパティを使用して、他のキーボードイベント情報を取得することもできます。たとえば、event.key を使用して、キーボードイベントに対応する文字を取得できます。

window.addEventListener('keydown', function(event) {
  console.log(event.key);
});

ログイン後にコピー

モバイルデバイスでは、キーボードイベントオブジェクトは、ユーザーの入力方法と現在のロケールに応じて異なる文字を返す場合があります。したがって、正しい文字を取得するには、event.key プロパティを使用して取得する必要があります。

入力イベント

キーボードイベントの使用に加えて、入力イベントを使用してモバイルデバイス上のユーザー入力を監視することもできます。キーボードイベントとは異なり、入力イベントは、手書き入力や音声入力などのユーザー入力を監視するために使用できます。

var inputElement = document.getElementById('input-element');

inputElement.addEventListener('input', function(event) {
  console.log(event.target.value);
});

ログイン後にコピー

このコードは、input イベントを使用して、input 要素の入力を監視し、ユーザーがコンソールに入力した値を出力します。イベントハンドラー関数では、event.target を使用して、入力されている要素オブジェクトを取得し、入力ボックスの値を取得できます。

iOS と Android では入力イベントが若干異なることに注意してください。 iOS では、入力が完了するまで入力イベントは発生しません。 Android では、ユーザーが入力すると入力イベントがトリガーされる場合があります。

Touch イベント

モバイルデバイスでユーザー入力を取得するもう 1 つの方法は、Touch イベントを使用することです。タッチイベントは、モバイルデバイス上のタッチ操作を監視するために特別に設計されたイベントタイプです。 Web サイトまたはアプリケーションがジェスチャー入力とタッチ操作をサポートする必要がある場合は、タッチイベントを使用するのが良い方法です。

JavaScript では、touchstart イベントと touchend イベントを使用して、ユーザーが指で入力デバイスに触れたときに押す操作と放す操作を取得できます。ユーザーが長押ししていることを検出する必要がある場合は、touchmove イベントを使用してユーザーの操作をキャプチャし、指が同じ位置にあるかどうかを判断できます (これは通常、長押し操作を示します)。

var touchElement = document.getElementById('touch-element');

touchElement.addEventListener('touchstart', function(event) {
  console.log('Touch started');
});

touchElement.addEventListener('touchend', function(event) {
  console.log('Touch ended'); 
});

touchElement.addEventListener('touchmove', function(event) {
  if (event.touches.length == 1) {
    console.log('Long press detected');
  }
});

ログイン後にコピー

このコードでは、touchstart、touchend、touchmove イベントを使用してユーザーの指のタッチ操作を検出します。ユーザーが指を押すか離すと、コンソールは「タッチ開始」および「タッチ終了」を出力し、ユーザーが長押しすると、コンソールは「長押し検出」を出力します。

タッチイベントを使用してキーボード入力情報をキャプチャする方法は比較的少数であり、それらはジェスチャ入力を必要とする一部の特定のシナリオにのみ適していることに注意してください。

概要

これまで見てきたように、モバイルデバイスでキーボード入力情報を取得するにはさまざまな方法があります。キーボードイベント、入力イベント、タッチイベントを使用して、対応する操作を完了できます。

ただし、モバイルデバイスでキーボード入力情報を取得する方法はデスクトップよりも複雑であることに注意してください。キーボードイベントとタッチイベントは、モバイルデバイスやブラウザ環境によって動作が異なる場合があります。したがって、モバイルデバイスにキーボード入力機能を実装する場合は、コードの互換性、信頼性、使いやすさを確保するために、十分なテストとデバッグ作業を行う必要があります。

さらに、キーボード入力機能を実装する過程では、セキュリティの問題も考慮する必要があります。 JavaScript スクリプトは自由にアクセスして変更できるため、ユーザーが入力した情報はデータの改ざんや盗難を防ぐために慎重に扱う必要があります。ベストプラクティスは、サーバー側でユーザー入力を検証およびフィルタリングして、Web サイトとアプリケーションのセキュリティと信頼性を向上させることです。

以上がJavaScript プログラムはどのようにして電話キーの値を取得しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。