現(xiàn)在問(wèn)題是無(wú)論點(diǎn)擊哪個(gè)input總會(huì)讓第二個(gè)input上的label隱藏，請(qǐng)問(wèn)該如何修改，才能讓點(diǎn)擊第一個(gè)時(shí)候第一個(gè)label隱藏，點(diǎn)擊第二個(gè)就隱藏第二個(gè)的label？ 求幫助 不勝感激！最近遇到很多這樣問(wèn)題，比如表格中 每行的按鈕，如何判斷點(diǎn)擊的是那一行上的按鈕？<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Input兼容提示</title><style>#login{margin:100px auto;width: 500px;}? ? ? ? ? ? ? .form-row{padding: 10px 0;position: relative;overflow: hidden;}? ? ? ? ? ? ? .form-row input{height: 30px;float: left;padding-left: 5px;line-height: 30px;width: 300px;border: 1px solid #ddd;}? ? ? ? ? ? ? .form-row ?.placeholder{color: #C1C0C0;position: absolute;top: 19px;left: 60px;}? ? ? ? ? ? ? .form-row .id-inhead{float: left;height: 33px;width: 50px;line-height: 33px;}</style></head><body><form id="login">? ? ? ? ? ? ?<div>? ? ? ? ? ? ? ? ? ? ? ? ? <label for="accounts">帳號(hào)：</label>? ? ? ? ? ? ? <label for="accounts">請(qǐng)輸入帳號(hào)</label>? ? ? ? ? ? ? <input type="text" id="accounts">? ? ? ? ? ? ?</div>? ? ? ? ? ? ?<div> ?? ? ? ? ? ? ? ? ? ? ? ? ? <label for="pass">密碼：</label>? ? ? ? ? ? ? <label for="pass">請(qǐng)輸入密碼</label>? ? ? ? ? ? ? <input type="password" id="pass">? ? ? ? ? ? ?</div></form><script>var form=document.getElementById('login');var odiv=form.getElementsByTagName('div');var elediv=[];// 篩選class 名為form-row的節(jié)點(diǎn) 存入數(shù)組elediv中for(var i=0,l=odiv.length;i<l;i++){if (odiv[i].className=='form-row') {elediv.push(odiv[i]);}}// 遍歷form-row節(jié)點(diǎn)數(shù)組for(var n=0,m=elediv.length;n<m;n++){// 獲取數(shù)組中input節(jié)點(diǎn)數(shù)組var input=elediv[n].getElementsByTagName('input');// 獲取數(shù)組中l(wèi)abel節(jié)點(diǎn)數(shù)組var label=elediv[n].getElementsByTagName('label');// 定義存放 class名為placeholder的label變量 labelpvar labelp;for(var i=0;i<label.length;i++){if (label[i].className=='placeholder') {labelp=label[i];}}// 當(dāng)input獲得焦點(diǎn)時(shí)候，labelp隱藏? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? for(var a=0;a<input.length;a++){? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?input[a].onfocus=function(){? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?labelp.style.display="none";? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }}</script></body></html>
input+label制作兼容IE8的輸入提示，實(shí)現(xiàn)placeholder效果，下附代碼
wubin_work
2017-01-18 17:18:14