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

HTML DOMのKbdオブジェクトとは？使い方をサンプルコード付きで解説

Kbdオブジェクトとは

HTML DOMのKbdオブジェクトは、HTMLの<kbd>要素に対応するオブジェクトです。<kbd>要素は、ユーザーがキーボードから入力するテキスト（キー入力やコマンドなど）を表すインライン要素で、デフォルトでは等幅フォント（モノスペースフォント）で表示されます。

JavaScriptを使ってこのオブジェクトを操作することで、ページ上に動的にキーボード入力を表す要素を生成したり、スタイルを変更したりすることが可能です。

構文

<kbd>要素を新しく作成するための基本構文は以下のとおりです。

var kbdObject = document.createElement("KBD");

document.createElement()メソッドに"KBD"を指定することで、Kbdオブジェクトが生成され、変数に格納できます。

よく使われるプロパティとメソッド

Kbdオブジェクトは標準的なHTMLElementとして、次のような機能を持っています。

  • appendChild()：子ノード（テキストなど）を要素に追加する
  • textContent：要素内のテキストを取得・設定する
  • style：CSSスタイルを動的に変更する

サンプルコード

ここでは、テキストボックスに入力された内容をKbdオブジェクトとして画面に表示するシンプルな例を紹介します。

<!DOCTYPE html>
<html>
<head>
<title>Kbd Object</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>Kbd Object</legend>
<label for="textSelect">Keyboard Input: </label>
<input id="textSelect" type="text" placeholder="John Doe">
<input type="button" onclick="convertKBD()" value="Check">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var textSelect = document.getElementById("textSelect");
    function convertKBD() {
        var kbdObject = document.createElement("KBD");
        var kbdText = document.createTextNode(textSelect.value);
        kbdObject.appendChild(kbdText);
        divDisplay.appendChild(kbdObject);
    }
</script>
</body>
</html>

コードのポイント

  • convertKBD()関数：ボタンクリック時に呼び出され、処理を実行します
  • createTextNode()：入力値をテキストノードとして生成します
  • appendChild()：作成したテキストノードをKbdオブジェクトに追加し、さらに表示用のdiv要素へ挿入しています

実行結果

このコードを実行すると、以下のように動作します。

「Check」ボタンをクリックする前

HTML DOMのKbdオブジェクトとは？使い方をサンプルコード付きで解説

「Check」ボタンをクリックした後

HTML DOMのKbdオブジェクトとは？使い方をサンプルコード付きで解説

ボタンをクリックすると、テキストボックスに入力された内容が等幅フォントの<kbd>要素として画面に追加表示されることが確認できます。このように、Kbdオブジェクトを利用すれば、キーボード入力を視覚的に強調したい場面で便利に活用できます。

  1. HTML DOM HRオブジェクトとは？作成方法と使い方を解説

    HTML DOM の HR オブジェクトは、HTML 文書内の <hr> 要素を表すオブジェクトです。<hr> 要素は、コンテンツの話題やテーマの区切りを視覚的に示す水平線（罫線）として表示されます。JavaScript を使えば、この水平線を動的に生成してページに挿入することも可能です。ここでは、HR オブジェクトの基本的な作成方法と実践的な使用例を紹介します。HRオブジェクトの作成方法（構文）hr オブジェクトを新しく作成するには、document.createElement() メソッドを使用します。構文は以下のとおりです。document.createEleme

  2. HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説

    HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注