輸入框高亮
HTML
<form class="container">
<h2>用戶登錄</h2>
<div class="content">
<!--<p><label>用戶名：</label><input class="f-text" type="text"></p>-->
<span style="margin-right: 2px; margin-bottom: 10px">用戶名:</span>
<input class="f-origin" type="text" style="margin-bottom: 10px"><br>
<span style="margin-right: 3px;margin-left: 10px">密碼:</span>
<input class="f-origin" type="password">
</div>
<button class="login">登錄</button>
</form>
CSS
.container {
width: 400px;
margin:0 auto;
background-color: rgb(254, 244, 235);
border: 1px solid orangered;
}
h2 {
//h2不應(yīng)該設(shè)置width,一旦margin改變,h2就會超出父元素或留白
//width: 392px;
margin: 0;
color: orangered;
background-color: rgb(255, 235, 215);
padding: 3px;
border-bottom: 1px solid orangered;
}
.content {
width: 220px;
margin: 20px auto;
}
.f-origin {
background-color: rgb(255,253,236);
border-radius: 3px;
}
.login {
width: 87px;
background-color: orangered;
padding: 5px 30px;
border-radius: 3px;
border: none;
color: #ffffff;
margin-bottom: 10px;
text-align: center;
margin-left: 132px;
}
.f-text {
background-color: rgb(255,231,231);
}
JS
window.onload = function () {
var aInput = document.getElementsByTagName('input');
for (var i=0; i<aInput.length; i++) {
aInput[i].onfocus = function () {
this.className = 'f-text';
}
aInput[i].onblur = function () {
this.className = 'f-origin';
}
}
}
onfocus當(dāng)元素獲得焦點(diǎn)時(shí)觸發(fā)
onblur當(dāng)元素失去焦點(diǎn)時(shí)觸發(fā)
className用于js中改變類名, 在之前的實(shí)例中使樣式為默認(rèn)樣式就應(yīng)該用這個(gè),一直知道這個(gè)屬性,竟然沒想到
在其他人的代碼中, 用戶名,密碼以及登錄按鈕的HTML都是這樣
<p><label>用戶名</label><input type="text" class="f-text" /></p>
按鈕也是這樣,只是type不同, <label></label>沒有值也寫在里面, 設(shè)置label寬度, 所以按鈕與輸入框左對齊, 循環(huán)所有tagName為input的元素, 當(dāng)按鈕元素獲得焦點(diǎn)時(shí)也可以改變按鈕的背景色
