参考にした動画
学んだこと
・<input>要素のtype="text"属性と<textarea>要素の使い分け
・slice() slice | MDN
写経 && 実験したコード
<html>
<body>
<div>
<h3>メモの登録</h3>
title<input type="text" id="id-title"><br>
body<textarea id="id-body"></textarea><br>
<button id="id-add-button">メモ登録する</button>
</div>
<dir>
<h3>メモの一覧</h3>
<button>削除する</button>
<table class="table">
<thead>
<tr>
<th scope="col">-</th>
<th scope="col">タイトル</th>
<th scope="col">作成日</th>
<th scope="col">更新日</th>
<th scope="col">編集</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td><button>編集</button></td>
</tr>
</tbody>
</table>
</dir>
</body>
<script>
let titleElement = document.getElementById("id-title")
let bodyElement = document.getElementById("id-body")
let addButton = document.getElementById("id-add-button")
addButton.addEventListener("click",(event)=>{
let title = titleElement.value
let body = bodyElement.value
// 現在時刻を表示する
let createdAt = new Date().toISOString()
console.log(title + body + createdAt)
})
</script>
</html>
ブラウザ
やりたいこと1
・3列、10行、30文字以内入力ができるテキストエリアを作る。
・テキストエリアはブラウザでサイズを変更できないようにCSSで制御する。
<html>
<body>
<textarea id="myTextarea" maxlength="30"rows="3"cols="10" class="fixed-size-textarea"></textarea>
</body>
<style>
/* リサイズを無効にする */
.fixed-size-textarea {
resize: none;
}
</style>
<script>
// テキストエリアの文字の入力制限のプログラム
const textarea = document.getElementById('myTextarea');
// addEventListenerの引数のinputは今回の場合だとk
textarea.addEventListener('input', function() {
if (textarea.value.length > 30) {
// myTextareaというidを持つ要素を取得している。
// addEventListenerメソッドを使用して、inputイベントに対するイベントリスナーを登録している。
// 'input' イベントは、ユーザーがテキストエリアでキーボードからの入力が行われたり、
// テキストが貼り付けられたり、選択肢が変更されたりした場合に 'input' イベントがトリガーされる。
// 入力が行われるたびに、イベントリスナーのコールバック関数が実行される。
// その中で、textarea.value.lengthを使って現在のテキストエリアの入力内容の長さを取得する。
// 条件分岐で長さが30を超える場合の処理を行っている。
// textarea.value.slice(0, 30)は、テキストエリアの入力内容から最初の0文字目から30文字目までを切り取る。
// その結果をtextarea.valueに代入することで、入力を30文字までに制限する。
// 結果、テキストエリアに入力された文字列を最大30文字まで制限するためのもの。
// テキストエリアに入力が行われるたびに文字列が0番目から30番目の文字以内かどうか判定し制限する。
// 文字をカウントし、その値をtextarea.valueに代入している
textarea.value = textarea.value.slice(0, 30); // 入力を30文字までに制限
}
});
</script>
</html>
やりたいこと1のブラウザ
<input>要素のtype="text"属性と<textarea>要素の使い分け
<input>要素のtype="text"属性の特徴
・一行で完結できるテキスト入力に使用される。
・パスワード入力やラジオボタンのように様々な入力タイプを表現できる。
・cols(column:列の複数形)属性やrows(row:行の複数形)属性は適用されない。
<textarea>属性の特徴
・複数行のテキスト入力に使用される。
・cols(column:列の複数形)属性やrows(row:行の複数形)属性で列と行の制限ができる。(MacBook Airでは数字が適応された)
・CSSでテキストエリアのサイズを指定しないとブラウザでサイズを動かせてしまう。
textareaタグの使用例
・郵便局のHPでtextarea見つけた！
slice()
// 配列に対して
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2,3));
// 文字列に対して
const str = "ponchan";
console.log(str.slice(0,3));
コンソール
Array ["camel"]
"pon"