文本域 <textarea>

Introduction

文本域；多行文本输入
行内盒 inline-block
默认结构；建议使用 CSS 设置宽高来代替 cols、rows
更多信息，请访问 MDN - <textarea>

<textarea name="" id="" cols="30" rows="10"></textarea>

文本域属性
item	desc
name	名称，用以提交数据
placeholder	提示信息/占位符
maxlength	最大字符数
wrap	是否换行；默认 on \| 换行。off \| 不换行。谁会不换行呢
cols	列数；建议使用 CSS 宽高指定
rows	行数；建议使用 CSS 宽高指定

<textarea name="msg" id="msg" placeholder="your message" maxlength="60"></textarea>

CSS

Initialization

先初始化样式再定制样式
默认情况下，可以自由缩放，会影响布局；应指定不缩放
属性：字体、边框、轮廓和缩放等
选择器：伪类选择器 :focus

[] 初始化样式

textarea {
  display: block;
  width: 100%;
  resize: none;
  border: none;
  outline: none;
  padding: 10px;
  background-color: transparent;
  font: inherit;
  color: inherit;
  box-sizing: border-box;
}

[] 内容较多时，还应该考虑滚动条的设计

textarea::-webkit-scrollbar {
  width: 8px;
}

textarea::-webkit-scrollbar-thumb {
  background-color: #f40;
}

[] 获取焦点时，改变边框颜色

.msg {
  border: 1px solid #ccc;
  border-radius: 6px;
}

.msg:focus {
  border-color: #f40;
}

JavaScript

获取元素
响应事件

文本域事件
item	desc
change	选择改变时
focus	获取焦点时
blur	失去焦点时

[] 动态改变背景

const msg = document.getElementById('msg');
function setBg(color) {
  msg.style.background = color;
}
msg.addEventListener('change', (e) => {
  console.log(msg.value)
});
msg.addEventListener('focus', (e) => {
  setBg('#f3f4f5')
});
msg.addEventListener('blur', (e) => {
  setBg('#fff')
});

文本域

Introduction

CSS

Initialization

JavaScript

Summary & Homework

Summary

Homework