この記事では、JavaScript でテキスト領域の値を取得する方法について説明します。
JavaScript でテキスト領域の値を取得する方法は?
テキスト領域の値は、次の方法を使用して JavaScript で取得できます。
- 「 getElementById() ' 方法。
- 「 addEventListener() ' 方法。
- 「 jQuery 」。
アプローチ 1: getElementById() メソッドを使用して JavaScript でテキスト領域の値を取得する
「 getElementById() ” メソッドは、指定された “ ID 」.このメソッドを実装して、入力テキスト フィールドを取得し、そこに入力された値を返すことができます。
構文
資料。 getElementById ( エレメント )
指定された構文では:
- 「 エレメント ' を参照 ' ID 」を特定の要素に対して取得します。
例
次の例を見てみましょう。
以下のコードに次の手順を適用してみましょう。
< h3 > テキストエリアの値を取得 の JavaScript h3 >
何かを入力 : < 入力方式 = '文章' ID = 'TXT' プレースホルダー = 「テキストを入力してください...」 >
< ボタンオンクリック = 'テキストエリア値()' > 価値を得る ボタン >
次の手順を実行します。
- 最初のステップで、記載されている見出しを指定します。
- その後、指定された「 ID ' と ' プレースホルダ ' 価値。
- また、「」が付いたボタンを作成します。 オンクリック 」 関数 textareaValue() にリダイレクトするイベント
コードの JavaScript 部分に進みましょう。
< 脚本 >関数 テキストエリア値 ( ) {
させて 得る = 資料。 getElementById ( 'TXT' ) . 価値
アラート ( 得る )
}
脚本 >
上記の JavaScript コードでは:
- 「」という名前の関数を宣言します テキストエリア値() 」。
- その定義では、「 getElementById() ' 方法。
- また、「 価値 」プロパティを使用して、入力されたテキスト値を取得します。
- 最後に、「 アラート 」ダイアログボックス。
出力
上記の出力では、入力された値が警告ダイアログ ボックスを介して取得されていることがわかります。
アプローチ 2: addEventListener() メソッドを使用して JavaScript でテキスト領域の値を取得する
「 addEventListener() ” メソッドは、” を関連付けるために使用されます。 イベント 要素付き。このメソッドを使用して、イベントを関数に関連付けることができます。これにより、テキスト領域の値が、コンソールに並べて入力されるたびにフェッチされます。
構文
エレメント。 addEventListener ( イベント 、 関数 、 エグゼクティブ )上記の構文では:
- 「 イベント 」はイベント名を指します。
- 「 関数 」は、イベントのトリガーで実行される関数を示します。
- 「 エグゼクティブ 」はオプションのパラメータです。
例
以下の例を順を追って見ていきましょう。
< テキストエリア ID = 「txtエリア」 行 = 「5」 列 = 「25」 プレースホルダー = 「テキストを入力...」 > テキストエリア >
< スクリプトの種類 = 「テキスト/ジャバスクリプト」 >
させて 得る = 資料。 getElementById ( 「txtエリア」 ) ;
コンソール。 ログ ( 得る . 価値 ) ;
得る . addEventListener ( '入力' 、 関数 テキストエリア値 ( イベント ) {
コンソール。 ログ ( イベント。 目標 . 価値 ) ;
} ) ;
脚本 >
上記のコード スニペットでは:
- 記載されているラベルを指定します。また、「 テキストエリア 」の指定された値を持つ要素 ID ' と ' プレースホルダ 」とその寸法も調整します。
- コードの JavaScript 部分で、前の手順で指定したテキストエリアにアクセスし、「 価値 ' 財産。
- 次のステップで、イベントを添付します “ 文章 「フェッチされた」 テキストエリア 」を使用して addEventListener() ” メソッドを作成し、それを関数に適用します ” テキストエリア値() 」。 「 イベント 」は、トリガーされたイベントに関する情報を引数に渡します。
- これにより、入力された各テキスト値が並べてログに記録されます。
出力
上記の出力から、「 フェッチ 入力された各テキスト値の「」を確認できます。
アプローチ 3: jQuery を使用して JavaScript でテキスト領域の値を取得する
「 jQuery 」を適用して入力テキスト フィールドにアクセスし、ドキュメント オブジェクト モデル (DOM) が読み込まれるとすぐにその機能をトリガーできます。
例
以下の例に従ってみましょう。
何かを入力 : < 入力方式 = '文章' ID = 'TXT' プレースホルダー = 「テキストを入力してください...」 >
< ボタン > 価値を得る ボタン >
上記のコード行で、次の手順を実行します。
- メソッドを適用するには、jQuery ライブラリを含めます。
- 「 入力 」を指定された値のテキストフィールドとして「 ID ' と ' プレースホルダー 」 前に説明したように。
- また、ボタンのクリック時に値を取得するためにボタンを作成します。
コードの JavaScript 部分に進みます。
< 脚本 >$ ( 資料 ) . 準備 ( 関数 ( ) {
$ ( 'ボタン' ) . クリック ( 関数 ( ) {
コンソール。 ログ ( $ ( '入力テキスト' ) . 値 ( ) ) ;
} ) ;
} ) ;
脚本 >
記載されている手順に従います。
- 「を適用します。 準備（） 」メソッドを追加して、ロードされた DOM にさらにメソッドを適用します。
- 作成したボタンにアクセスし、「 クリック（） 」メソッドをそのパラメーターに指定された関数を実行します。
- click() メソッドは、指定された入力テキスト フィールドにアクセスし、入力されたテキスト値をコンソールに記録します。
出力
したがって、型の値はコンソールに記録されます。
これらはすべて、JavaScript を使用してテキスト領域の値を取得するさまざまな方法です。
結論
「 getElementById() 」メソッド、「 addEventListener() 」メソッドまたは「 jQuery 」を利用して、JavaScript でテキスト領域の値を取得できます。 getElementById() メソッドを実装して、入力テキスト フィールドにアクセスし、入力されたテキスト領域の値をアラートで表示できます。 addEventListener() メソッドを利用して、「 入力 」 各入力時にテキスト値を並べて取得するイベント。 jQuery を適用してボタンに直接アクセスし、コンソールでボタンをクリックすると、入力されたテキスト値を取得できます。このチュートリアルでは、JavaScript でテキスト エリアの値を取得する方法について説明します。