HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLDOMKeyboardEventの場所プロパティ

HTML DOM KeyboardEvent loactionプロパティは、キーボードで押されたキーの場所に対応する番号を返します。

構文

以下は構文です-

押されたキーの戻り位置-

event.location

数字

ここでは、番号 返されるのは次のとおりです-

番号
説明
0
キーボードのほぼすべての値を表します。 （キーボードの中央セクションにあるすべてのキー。例：「Q」、「\」、「スペースバー」）
1
左キーボードの値を表します。 （キーボードの左側のセクションにあるすべてのキー。例：「leftctrl」、「left Shift」、「leftalt」）
2
右キーボードの値を表します。 （キーボードの右側のセクションにあるすべてのキー。例：「rightctrl」、「right Shift」、「right alt」）
3
テンキーキーボードの値を表します。 （キーボードのテンキーセクションのすべてのキー。例：「1」、「/」、「。」）

例

KeyboardEventの例を見てみましょう ロケーションプロパティ-

<!DOCTYPE html>
<html>
<head>
<title>KeyboardEvent location</title>
<style>
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   * {
      padding: 2px;
      margin:5px;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
<form>
<fieldset>
<legend>KeyboardEvent-location</legend>
<label>Fill in the blanks:
<input type="text" id="textSelect" placeholder="type here..." onkeydown="getEventData(event)" autocomplete="off">
</label>
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var textSelect = document.getElementById("textSelect");
   function getEventData(InputEvent) {
      if(InputEvent.location === 0)
         divDisplay.textContent = 'key Pressed in middle section';
      else if(InputEvent.location === 1)
         divDisplay.textContent = 'key Pressed in left section';
      else if(InputEvent.location === 2)
         divDisplay.textContent = 'key Pressed in right section';
      else
      divDisplay.textContent = 'key Pressed in numpad section';
   }
</script>
</body>
</html>

出力

これにより、次の出力が生成されます-

テキストフィールドに何かを入力する前に-

HTMLDOMKeyboardEventの場所プロパティ

「w」と入力した後 テキストフィールド-

HTMLDOMKeyboardEventの場所プロパティ

「+」を押した後 テンキーのテキストフィールド-

HTMLDOMKeyboardEventの場所プロパティ


  1. HTMLDOMロケーション検索プロパティ

    場所検索プロパティは、URLのクエリパラメータに対応する文字列を返す/設定します。 構文 以下は構文です- 検索の戻り値 プロパティ location.search プロトコルプロパティセットの値 location.search = searchString 例 ロケーション検索の例を見てみましょう プロパティ- <!DOCTYPE html> <html> <head> <title>Location protocol</title> <style>    form {   &n

  2. HTML DOMKeyboardEventaltKeyプロパティ

    HTML DOM KeyboardEvent altKeyプロパティは、 ALTかどうかを返します。 HTMLドキュメントでキーイベントがトリガーされたときにキーが押されたかどうか。 構文 以下は構文です- event.altKey HTMLKeyboardEventaltKeyプロパティの例を見てみましょう- 例 <!DOCTYPE html> <html> <style>    body {       color: #000;       height: 100vh;