JavaScript テキスト ボックス
Web 開発では多くのスクリプト言語を選択して使用できますが、JavaScript は使用できる最高のスクリプト言語の 1つです。
JavaScript は Web ページをインタラクティブで動的なものにします。通常、プログラマーや開発者は、HTML (HyperText Markup Language)、XHTML (Extensible HyperText Markup Language) などのマークアップ言語、および CSS (Cascading Style Sheets) などのスタイル シート言語と共に JavaScript を使用します。
テキスト ボックスは、Web ブラウザー、電子メール クライアントなど、多くのプログラムで見られる重要な機能です。簡単に言えば、テキスト ボックスは、ユーザーがテキストを入力できるグラフィカルな領域であり、主にユーザーからの入力を取得するために使用されます。 .
通常、テキスト ボックスは HTML で作成できますが、JavaScript を使用して作成することもできます。 この記事では、HTML を使用して JavaScript を使用してテキスト ボックスを作成する方法について説明します。
JavaScript を使用してテキスト ボックスを作成する前に、HTML を使用して単純なテキスト ボックスを作成する方法を見てみましょう。
HTML を使用してテキスト ボックスを作成する
<input> タグを使用して、HTML でテキスト ボックスを作成できます。 属性として type を指定し、その値として text を指定します。
テキスト ボックスを作成する構文は次のとおりです。
<input type = "text">
上記のコード スニペットを使用してテキスト ボックスを作成する方法を見てみましょう。 以下のコードを参照してください。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML text box</title>
</head>
<body>
<input type="text", placeholder="type something..">
</body>
</html>
上記のコード スニペットは、<input> タグを使用して単純なテキスト ボックスを作成する単純なコード チャンクです。 より正確に表示するために、いくつかの単語を値として持つ placeholder 属性を追加しました。
以下の出力が得られます。
上に示したように、予想どおり、単純なテキスト ボックスが表示されます。
JavaScript を使用してテキスト ボックスを作成する
HTML を使用する代わりに、JavaScript を使用してテキスト ボックスを作成できます。 以下は、これを実現するための 3つのステップです。
-
createElement()関数を使用して入力要素を作成し、それを変数に割り当てます。 -
typeを属性として、textを入力要素の値として設定します。 -
<body>タグ内にinput要素を追加します。
上記の手順のコードを作成しましょう。
コード：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<title>JavaScript text box</title>
</head>
<body>
<script>
const textBox = document.createElement("input");
textBox.setAttribute("type", "text");
document.body.appendChild(textBox);
</script>
</body>
</html>
上記のコードでは、前述の 3つのステップをコード チャンクに変換しています。 <body> タグ内では、createElement() 関数を使用して input 要素を作成し、その関数を textbox という変数に割り当てています。
次に、type を属性として、text を新しく宣言された変数の値として設定します。 その後、textbox 変数 (input 要素) を <body> タグに追加しました。
ここで、実装されたコードを実行すると、先ほどと同じように単純なテキスト ボックスが表示されます。 以下の出力を参照してください。
JavaScript を使用して複数のテキスト ボックスを作成する
複数のテキスト ボックスを作成する必要がある場合があります。 特定のユーザーの生年月日を取得するために、フォームにセクションを追加することがあります。
このような状況では、開発者は日付、月、年を別々に取得したいと考えています。 そのために、複数のテキスト ボックスを使用します。
複数のテキスト ボックスを作成する方法は複数あります。 最も簡単な方法は、for ループを使用することです。 for ループを使用して複数のテキスト ボックスを作成する方法を見てみましょう。
まず、<div> タグを作成し、その中にテキスト ボックスを作成します。 また、<div>タグに以下のようにIDを付与します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<title>JavaScript multiple text boxes</title>
</head>
<body>
<div id="textBoxes"> </div>
<script src="main.js"></script>
</body>
</html>
次に、JavaScript コードを実装します。 別のファイルに記述することも、インライン JavaScript コードとして記述することもできます。
この例では、別の JavaScript ファイルを実装します。 以下のコードを参照してください。
function createTextBoxes(number) {
var string = '';
var i;
for (i = 0; i < number; i++) {
string += '<input type = "text" placeholder = "type something..">';
}
document.getElementById('textBoxes').innerHTML = string;
}
createTextBoxes(4);
上記のコード チャンクでは、createTextBoxes という関数を作成し、パラメーターとして number を指定しました。 number は、必要なテキスト ボックスの数です。
次に、空の string を文字列として、i を反復子として指定しました。 そのステートメントの下で、number パラメーターの値に達するまで反復する for ループを使用しました。
次に、for ループ内で、<input> タグを使用してテキスト ボックスを作成しました。 type 属性と text 値を指定してテキスト ボックスとして識別し、placeholder 属性といくつかのテキストを指定しました。
その後、ID を使用して、HTML の <body> タグで関連するコンポーネントに割り当てます。
最後に、パラメータとして createTextBoxes() 関数に 4 を渡して関数を呼び出しました。
コードを実行すると、以下の結果が出力されます。
ご覧のとおり、指定したプレースホルダーを含む 4つのテキスト ボックスが表示されます。
まとめ
この記事では、テキスト ボックスとは何か、なぜそれが必要なのかについて説明しました。 また、JavaScript と HTML を使用してテキスト ボックスを作成する方法も学びました。
最初に、JavaScript を使用して単純なテキスト ボックスを作成し、次に例を使用して for ループを使用して複数のテキスト ボックスを作成する方法を示しました。
JavaScript を使用してテキスト ボックスを作成する方法は他にもありますが、上記の方法は、目標を達成するための最も簡単で簡単な方法です。
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.