javascript テキストエリアの値を取得する
- 2020.09.12
- javascript
- javascript

javascriptで、テキストエリアの値を取得するサンプルコードを記述してます。
環境
- OS windows10 pro 64bit
- Apache 2.4.43
- ブラウザ chrome 102.0.5005.115
取得方法
以下の方法で、取得することができます。
<form name="frm">
<textarea type="text" id="hoge" name="bar" class="foo"></textarea>
</form>
<script>
// idから取得
document.getElementById("hoge").value
// nameから取得
document.getElementsByName("bar")[0].value
// class名から取得
document.getElementsByClassName("foo")[0].value
// formのidから取得
document.frm.hoge.value
</script>
実際に取得してみます。
<form name="frm">
<textarea type="text" id="hoge" name="bar" class="foo">初期値</textarea>
</form>
<script>
// idから取得
console.log( document.getElementById("hoge").value ); // 初期値
// nameから取得
console.log( document.getElementsByName("bar")[0].value ) // 初期値
// class名から取得
console.log( document.getElementsByClassName("foo")[0].value ) // 初期値
// formのidから取得
console.log( document.frm.hoge.value ) // 初期値
</script>
実行結果

サンプルコード
以下は、
テキストエリアに入力するごとに値を表示し、フォーカスが外れるとクリアする
サンプルコードとなります。
※cssには「bootstrap material」を使用してます。関数もアロー関数を使用してます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>mebeeサンプル</title>
<!-- MDB -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css" rel="stylesheet" />
</head>
<style>
.main {
margin: 0 auto;
margin-top: 200px;
display: flex;
flex-direction: column;
align-items: center;
font-size: 25px;
width: 800px;
}
</style>
<script>
window.onload = () =>{
// textarea要素を取得
let hoge = document.getElementById("textarea");
// 表示用
let obj = document.getElementsByClassName('badge-primary')[0];
// 入力時に発生
hoge.addEventListener('input', () => {
// 入力された値を表示
obj.textContent = hoge.value;
});
// フォーカスが外れた時に発生
hoge.addEventListener('change', () => {
// クリア
hoge.value = '';
obj.textContent = '';
});
}
</script>
<body>
<div class="main">
<h2><span class="badge badge-primary">入力した値</span></h2>
<form>
<div class="form-group">
<textarea class="form-control" id="textarea" rows="3"></textarea>
</div>
</form>
</div>
</body>
</html>
値が表示されていることが確認できます。

-
前の記事
php fzaninotto/fakerを利用してダミーデータを作成する 2020.09.12
-
次の記事
Vagrantでlinuxmintを構築する 2020.09.13
コメントを書く