javascript - 為什么無(wú)法實(shí)現(xiàn)表單原件失去焦點(diǎn)后改變提示的樣式？
問(wèn)題描述
要實(shí)現(xiàn)一個(gè)表單，在輸入密碼一欄中如果沒(méi)有輸入或兩次輸入不一致則顯示提示，否則隱藏。但是提示始終出不來(lái)，求助是為什么呢？
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'><html xmlns='http://www.w3.org/1999/xhtml'><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8' /><link type='text/css' href='http://www.gepszalag.com/wenda/checkload.css' rel='stylesheet' /> <script type='text/javascript'>function checkEmpty(obj){ if(!obj.value)obj.nextSibling.style.display='block'; else obj.nextSibling.style.display='none'; } function checkPwd(obj){ var pwd = document.getElementById('pwd').value; var pwdAgain = obj.value; if(pwd != pwdAgain)obj.nextSibling.style.display='block'; elseobj.nextSibling.style.display='none';}</script><title>用戶(hù)登錄驗(yàn)證</title></head><body><form class='bg'> <ul><li>用戶(hù)名：</li><li>輸入密碼：</li><li>確認(rèn)密碼：</li> </ul> <p class='list'><p><input type='text'/></p><p><input type='password' onblur='checkEmpty(this)' /><span style='display:none'>密碼不能為空！</span></p><p><input type='password' onblur='checkPwd(this)'/><span style='display:none'>密碼不一致！</span></p><input type='submit' /> </p></form></body></html>
css代碼：
@charset 'utf-8';/* CSS Document */body{font-size:14px; font-family:'微軟雅黑';}body,p,ul,li{margin:0; padding:0; list-style:none;}.bg{ width:400px; height:180px; margin:50px; border:3px double #ccc; padding:40px; background:#CCC;}ul{float:left;}li{ text-align:right; height:50px;}.list{float:left;}p{ width:320px; height:50px; }span{ float:left; padding:0 0 0 10px; color:red;}#pwd{}
問(wèn)題解答
回答1：找到你代碼中如下這段
<p><input type='password' onblur='checkEmpty(this)' /><span style='display:none'>密碼不能為空！</span></p><p><input type='password' onblur='checkPwd(this)'/><span style='display:none'>密碼不一致！</span></p>
請(qǐng)刪掉 <input/>和<span>之間的換行即可。
原因DOMElement.nextSibling屬性返回該節(jié)點(diǎn)下一個(gè)同級(jí)DOM元素，換行或者空格都算做一個(gè)#text類(lèi)型的節(jié)點(diǎn)。之前你的代碼nextSibling返回的一個(gè)文本節(jié)點(diǎn)，在其上設(shè)置style屬性，當(dāng)然不能達(dá)成你的需求。
如果不信，你還可以驗(yàn)證一下：不改變你的html代碼，把腳本中 DOMElement.nextSibling換成 DOMElement.nextSibling.nextSibling 也能正常工作。
相關(guān)文章：
1. 在應(yīng)用配置文件 app.php 中找不到’route_check_cache’配置項(xiàng)2. html按鍵開(kāi)關(guān)如何提交我想需要的值到數(shù)據(jù)庫(kù)3. HTML 5輸入框只能輸入漢字、字母、數(shù)字、標(biāo)點(diǎn)符號(hào)？正則如何寫(xiě)？4. javascript - 請(qǐng)教如何獲取百度貼吧新增的兩個(gè)加密參數(shù)5. gvim - 誰(shuí)有vim里CSS的Indent文件, 能縮進(jìn)@media里面的6. 跟著課件一模一樣的操作使用tp6,出現(xiàn)了錯(cuò)誤7. PHP類(lèi)屬性聲明？8. javascript - JS請(qǐng)求報(bào)錯(cuò)：Unexpected token T in JSON at position 09. objective-c - ios 怎么實(shí)現(xiàn)微信聯(lián)系列表 最好是swift10. java - 安卓接入微信登錄,onCreate不會(huì)執(zhí)行
網(wǎng)公網(wǎng)安備