憤怒的WebAPI（三）——表單
阿新 • • 發佈：2018-12-22
一、表單內容操作
1、輸入框
<input type="text" id="ipt" value="這是舊的內容">
<script>
var ipt = document.getElementById('ipt');
console.log(ipt.value);
ipt.value = '這是新的內容';
console.log(ipt.value);
</script>
2、文字域
<textarea id="txt">這是文字域的內容</textarea> <script> var txt = document.getElementById('txt'); console.log(txt.value); txt.value = '這是文字域的新內容'; console.log(txt.value); </script>
3、下拉選單
<select>
<option id="opt" value="這是value">這才是內容</option>
</select>
<script>
// innerHTML 或 innerText，不能使用value屬性
var opt = document.getElementById('opt');
console.log(opt.innerText);
opt.innerText = '這是新內容';
console.log(opt.innerText);
</script>
二、表單事件&屬性
1、輸入框事件
獲取焦點事件: onfocus
失去焦點事件: onblur
<input type="text" id="ipt" value="天涼好個秋"> <script> var ipt = document.getElementById('ipt'); ipt.onfocus = function () { console.log('輸入框獲取焦點了'); // 如果當前輸入框內容為預設提示資訊，清除即可 if (this.value === '天涼好個秋') { this.value = ''; } }; ipt.onblur = function () { console.log('輸入框失去焦點了'); // 如果當前輸入框內容為空，還原為提示文字 if (this.value === '') { this.value = '天涼好個秋'; } }; </script>
2、複選框屬性
<input type="checkbox" id="cb">
<button id="btn">按鈕</button>
<script>
var cb = document.getElementById('cb');
var btn = document.getElementById('btn');
// 複選框選中屬性 checked
// - 設定布林型別值，true表示選中，false表示取消選中
// - 如果設定為非布林型別值，自動隱式轉換（瞭解）
btn.onclick = function () {
cb.checked = false;
};
</script>
3、下拉選單屬性
<select>
<option value="-1">未選擇</option>
<option value="1">吃飯</option>
<option id= sleep value="2">睡覺</option>
<option value="3">打豆豆</option>
</select>
<button id="btn">按鈕</button>
<script>
var btn = document.getElementById('btn');
var sleep = document.getElementById('sleep');
// 下拉選單選項選中屬性 selected, 布林型別值
// - true表示選中對應選項，false表示取消選中(預設選中第一個選項)
// - 如果為非布林型別，隱式轉換
btn.onclick = function () {
sleep.selected = true;
};
</script>
4、禁用屬性
<input type="text" id="ipt">
<button id="btn">按鈕</button>
<script>
var ipt = document.getElementById('ipt');
var btn = document.getElementById('btn');
// 禁用屬性：disabled
// - 值為布林型別，true表示禁用，false表示取消禁用(啟用)
// - 如果值為非布林型別，隱式轉換
btn.onclick = function () {
ipt.disabled = 'false';
};
</script>
三、表單案例
1、全選反選
<div class="wrap">
<table>
<!--全選反選按鈕所在行-->
<thead>
<tr>
<th>
<input type="checkbox" id="selectAll"/>
</th>
<th>菜名</th>
<th>飯店</th>
</tr>
</thead>
<!--每一個菜的選項-->
<tbody id="cai">
<tr>
<td>
<input type="checkbox"/>
</td>
<td>紅燒肉</td>
<td>田老師</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>西紅柿雞蛋</td>
<td>田老師</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>紅燒獅子頭</td>
<td>田老師</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>日式肥牛</td>
<td>田老師</td>
</tr>
</tbody>
</table>
</div>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微軟雅黑";
color: #fff;
}
td {
font: 14px "微軟雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
<script>
//1 獲取元素
var selectAll = document.getElementById("selectAll");//全選按鈕
var cbs = document.getElementById("cai").getElementsByTagName("input");//下面的四個小選項
//2 給selectAll設定點選事件
selectAll.onclick = function () {
//根據當前selectAll的選中屬性值，設定底部的四個cbs的狀態
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = this.checked;
}
};
//3 當點選底部的某個cb時，可能會選中頂部的selectAll
//只有當下面的所有cb均選中，才可以選中selectAll
for (var i = 0; i < cbs.length; i++) {
cbs[i].onclick = function () {
var flag = true;//假設本次點選後可以選中selectAll
for (var i = 0; i < cbs.length; i++) {
if (cbs[i].checked == false) {
//假設失敗，設定條件為false
flag = false;
break;
}
}
selectAll.checked = flag;
};
}
</script>
2、微博釋出
<div class="box" id="weibo">
<span>微博釋出</span>
<textarea name="" id="txt" cols="20" rows="10"></textarea>
<button id="btn">釋出</button>
<ul id="ul"></ul>
</div>
<style>
* {
margin: 0;
padding: 0
}
ul {
list-style: none
}
.box {
width: 600px;
margin: 100px auto;
border: 1px solid #000;
padding: 20px;
}
textarea {
width: 450px;
height: 160px;
outline: none;
resize: none;
}
ul {
width: 450px;
padding-left: 80px;
}
ul li {
/*line-height: 25px;*/
border-bottom: 1px dashed #cccccc;
word-break: break-all;
}
input {
float: right;
}
</style>
<script>
//1 獲取元素
var txt = document.getElementById("txt");
var btn = document.getElementById("btn");
var ul = document.getElementById("ul");
//2 點擊發布按鈕，動態建立li
btn.onclick = function () {
if (txt.value == "") {
alert("請輸入內容");
} else {
//3 根據當前使用者輸入的內容，進行li的建立
var li = document.createElement("li");
setText(li, txt.value);
//---設定刪除按鈕的結構
//使用document.createElement與appendChild
var input = document.createElement("input");
li.appendChild(input);
input.type = "button";
input.value = "刪除";
input.onclick = function () {
ul.removeChild(this.parentNode);
};
ul.insertBefore(li, ul.children[0]);
//----功能書寫完畢後，將內容清除，方便使用者下次輸入
txt.value = "";
}
};
function setText(element, xinText) {
if (typeof element.innerText == "string") {
//說明支援innerText屬性
element.innerText = xinText;
} else {
//說明支援textContent
element.textContent = xinText;
}
}
</script>