JavaScriptでテキストエリアの値を取得する方法！
JavaScriptでテキストエリアの値を取得する方法について解説します。ここでは主にHTMLのinputタグ、もしくはtextareaを用いた場合に、その値をJavaScriptで取得する方法、またtextareaの改行を文字数から省く方法も紹介します。
JavaScriptでテキストエリアの値を取得したい
JavaScriptでテキストエリアの値を取得して、その文字数が設定した文字数以上だと注意を促して、ユーザに訂正してもらうなどのバリデーションを行いたいと思うことがあります。
ここでは主にテキストエリアとしてはHTMLのinputタグとtextareaタグを用いて解説を行い、簡単なバリデーションの方法も解説します。
JavaScriptでテキストエリアの値を取得する方法
JavaScriptでテキストエリアを表示してその値を取得する方法として一般的なinputタグを用いた方法とtextareaタグを用いた方法の２パターンをそれぞれ解説していきます。
inputタグ
それではまずinputタグ属性のtypeにtextを用いた場合について解説します。
この場合JavaScriptではgetElementByIdメソッドを用いた場合と、formタグとname属性を用いた場合があり、それぞれ解説します。
getElementByIdメソッドを用いる場合
まずinputタグにid属性を付与します。
そしてJavaScriptのgetElementByIdメソッドでinputタグの要素を取得し、getElementById(id名).valueでテキストエリアの値を取得します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" id="test" onchange="check()" placeholder="文字を書いてログで確認してみましょう。">
</body>
<script>
//テキストエリアの値を取得
function check(){
console.log(document.getElementById('test').value);
}
</script>
</html>このようなコードを書いてテキストエリアの値を取得できるか、inputの中に文字を書いて、検証のログ画面で確認してみてください。
テキストエリアの値を取得できていることが分かります。
formとnameを用いる場合
formタグのname属性に適当な値を設定し、次にinputタグのname属性に適当な値を設定します。
そしてJavaScriptでdocument.(formのname名).(inputのname名).valueでinputタグの要素を取得した上でテキストエリアの値を取得できます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form name="form">
<input type="text" name="test" onchange="check()" placeholder="文字を書いてログで確認してみましょう。">
</form>
</body>
<script>
//テキストエリアの値を取得
function check(){
console.log(document.form.test.value);
};
</script>
</html>このようなコードでinputタグの中に文字を書き、検証のログ画面で確認してみると、テキストエリアの値を取得できていることが分かります。
サンプルコードで実際の挙動を見てみましょう
formタグの中で、inputタグにid属性を付与すると、getElementByIdメソッドを用いた方のやり方でも値の取得が可能です。
ここではテキストエリアの値の取得とよく一緒に使う簡単なバリデーションを使用例として、サンプルコードを用いて見てみましょう。
バリデーションの部分は後に解説します。
このように10文字以上の文字を入力すると、下に赤文字で注意されます。
ではバリデーションの部分を簡単に解説します。
if文を用いて、もしテキストエリアの値の長さが10文字以上なら、pタグに「10文字以下でお願いします。」という値を渡し、そうでなかったらpタグの値を空にするという設定を行っています。
textareaタグ
やり方はinputタグを用いたときとほとんど同じです。
違う点としてはinputタグがtextareaタグに変わり、type="text"が要らなくなったという点のみなので、ここでは簡単な説明とします。
それでは順番に見ていきましょう。
getElementByIdメソッドを用いる場合
textareaにid属性を付与し、JavaScriptのgetElementByIdメソッドを用いて、getElementById('id名').valueでテキストエリアの値を取得します。
コードとしては以下のような形です。
textareaに文字を書いて、検証のログ画面で確認してみるとテキストエリアの値を取得できていることが分かります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<textarea id="test" onchange="check()"></textarea>
</body>
<script>
//テキストエリアの値を取得
function check(){
console.log(document.getElementById('test').value);
}
</script>
</html>formとnameを用いる場合
formタグのname属性に適当な値を設定します。
次にtextareaタグのname属性に適当な値を設定します。
そしてdocument.(formのname名).(textareaのname名).valueでテキストエリアの値を取得できます。
コードは以下のようになります。
textareaに文字を書いて、検証のログ画面で確認してみてると、テキストエリアの値を取得できていることが分かります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form name="form">
<textarea name="test" onchange="check()"></textarea>
</form>
</body>
<script>
//テキストエリアの値を取得
function check(){
console.log(document.form.test.value);
}
</script>
</html>サンプルコードで実際の挙動を見てみましょう
textareaの場合、文字制限のバリデーションを行う時、文字数に改行もカウントされてしまいます。
ここではその改行を取り除いて、文字のみで文字数を制限するバリデーションを行っています。この部分については後に解説します。
ではサンプルコードを用いてプレビューを見てみましょう。
このように1つめのtextareaは改行も文字数として数えるため、10文字入力しなくても、注意されてしまいます。
しかし2つめのtextareaは改行を文字数として数えないため、10文字以上でないと、注意されません。
バリデーションの方法はinputの時と全く同じなので、説明を割愛させていただきます。
解説
ではここで改行を文字数として数えないための、コードについて解説します。
textareaでは改行を行った際、改行部分に改行コードである\nが隠れています。そして文字数を数える場合にこれも含んでしまいます。
そこでJavaScriptのreplaceメソッドを用いて\nを空文字に変えてあげます。
※replaceは文字列の置換を行うJavaScriptの関数です。
ただreplace("\n" , "")と書いてしまうと、改行コードが複数回登場しても最初の一回しか変換してくれません。
そこでreplace(/\n/g,"")としてあげることで、すべての改行コードが空文字に変わり、文字数としてカウントされなくなります。
まとめ
いかがでしたでしょうか？
JavaScriptでテキストエリアの値を取得する方法を身に付けておけば、何かフォームの内容を表示させたい時や、バリデーションを行うときにとても役に立ちます。
ぜひこの方法を身に付けてください。
