js實(shí)現(xiàn)表單檢測(cè)及表單提示的方法
本文實(shí)例講述了js實(shí)現(xiàn)表單檢測(cè)及表單提示的方法。分享給大家供大家參考。具體如下:
這是個(gè)實(shí)用的表單判斷以及表單提示效果,如果點(diǎn)擊需要輸入文字的時(shí)候,提示就會(huì)跑出來(lái),提示框的形狀比較個(gè)性化,有一個(gè)三角符號(hào)指向輸入框,有兩張圖片需要下載。
運(yùn)行效果如下圖所示:
在線演示地址如下:
http://demo.jb51.net/js/2015/js-table-check-form-tips-codes/
具體代碼如下:
<!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> <title>表單檢測(cè)及表單提示</title> <style type="text/css"> dl { font:normal 12px/15px Arial; position: relative; width: 350px; } dt { clear: both; float:left; width: 130px; padding: 4px 0 2px 0; text-align: left; } dd { float: left; width: 200px; margin: 0 0 8px 0; padding-left: 6px; } .hint { display: none; position: absolute; right: -250px; width: 200px; margin-top: -4px; border: 1px solid #c93; padding: 10px 12px; background: #ffc url("images/pointer.gif") no-repeat -10px 5px; } .hint .hint-pointer { position: absolute; left: -10px; top: 5px; width: 10px; height: 19px; background: url("images/pointer.gif") left top no-repeat; } </style> <script type="text/javascript"> function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } function prepareInputsForHints() { var inputs = document.getElementsByTagName("input"); for (var i=0; i<inputs.length; i++){ if (inputs[i].parentNode.getElementsByTagName("span")[0]) { inputs[i].onfocus = function () { this.parentNode.getElementsByTagName("span")[0].style.display = "inline"; } inputs[i].onblur = function () { this.parentNode.getElementsByTagName("span")[0].style.display = "none"; } } } var selects = document.getElementsByTagName("select"); for (var k=0; k<selects.length; k++){ if (selects[k].parentNode.getElementsByTagName("span")[0]) { selects[k].onfocus = function () { this.parentNode.getElementsByTagName("span")[0].style.display = "inline"; } selects[k].onblur = function () { this.parentNode.getElementsByTagName("span")[0].style.display = "none"; } } } } addLoadEvent(prepareInputsForHints); </script> </head> <body> <p style="font:normal 12px/15px Arial;">Tab or click through the fields to reveal the hints.</p> <dl> <dt> <label for="firstname">First Name:</label> </dt> <dd> <input name="firstname" id="firstname" type="text" /> <span class="hint">This is the name your mama called you when you were little.<span class="hint-pointer"> </span></span> </dd> <dt> <label for="lastname">Last Name:</label> </dt> <dd> <input name="lastname" id="lastname" type="text" /> <span class="hint">This is the name your sergeant called you when you went through bootcamp.<span class="hint-pointer"> </span></span> </dd> <dt> <label for="email">Email:</label> </dt> <dd> <input name="email" id="email" type="text" /> <span class="hint">The thing with the @ symbol and the dot com at the end.<span class="hint-pointer"> </span></span> </dd> <dt><label for="year">Birth Year:</label></dt> <dd> <select id="year" name="year"> <option value="">YYYY</option> <option value="1066">1066</option> <option value="1492">1492</option> <option value="1776">1776</option> </select> <span class="hint">Pick a famous year to be born in.<span class="hint-pointer"> </span></span> </dd> <dt> <label for="username">Username:</label> </dt> <dd> <input name="username" id="username" type="text" /> <span class="hint">Between 4-12 characters.<span class="hint-pointer"> </span></span> </dd> <dt> <label for="password">Password:</label> </dt> <dd> <input name="password" id="password" type="password" /> <span class="hint">Between 5-13 characters, but not 7. Never 7.<span class="hint-pointer"> </span></span> </dd> <dt class="button"> </dt> <dd class="button"> <input type="submit" class="button" value="Submit" /> </dd> </dl> </body> </html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- 表單JS彈出填寫提示效果代碼
- 實(shí)用的JS表單驗(yàn)證提示效果
- javascript寫的一個(gè)表單動(dòng)態(tài)輸入提示的代碼
- js+css實(shí)現(xiàn)增加表單可用性之提示文字
- js下在password表單內(nèi)顯示提示信息的解決辦法
- JavaScript DOM學(xué)習(xí)第八章 表單錯(cuò)誤提示
- javascript中IE瀏覽器不支持NEW DATE()帶參數(shù)的解決方法
- IE8的JavaScript點(diǎn)擊事件(onclick)不兼容的解決方法
- 讓ie運(yùn)行js時(shí)提示允許阻止內(nèi)容運(yùn)行的解決方法
- Javascript在IE下設(shè)置innerHTML時(shí)出現(xiàn)未知的運(yùn)行時(shí)錯(cuò)誤的解決方法
- JavaScript的常見兼容問(wèn)題及相關(guān)解決方法(chrome/IE/firefox)
- IE瀏覽器下JS腳本提交表單后,不能自動(dòng)提示問(wèn)題解決方法
相關(guān)文章
js數(shù)組常用19種方法(你會(huì)的到底有多少呢)
這篇文章主要給大家介紹了關(guān)于js數(shù)組常用19種方法,大家可以看看你會(huì)的到底有多少呢,在日常開發(fā)中我們會(huì)接觸到j(luò)s中數(shù)組的一些方法,需要的朋友可以參考下2023-09-09詳解javascript 正則表達(dá)式之分組與前瞻匹配
本文主要講解javascript 的正則表達(dá)式中的分組匹配與前瞻匹配的,需要對(duì)正則的有基本認(rèn)識(shí),本人一直對(duì)兩種匹配模棱不清,還有不清楚的朋友跟隨腳本之家小編一起看看吧2018-05-05CSS+Table圖文混排中實(shí)現(xiàn)文本自適應(yīng)圖片寬度(超簡(jiǎn)單+跨所有瀏覽器)
最近在為學(xué)樂(lè)網(wǎng)開發(fā)圖片顯示功能時(shí)遇到一個(gè)問(wèn)題:在一個(gè)table中有兩行,上邊顯示圖片(大小隨機(jī)),下邊顯示對(duì)圖片的相關(guān)說(shuō)明(文字長(zhǎng)度隨機(jī))2009-02-02Bootstrap的popover(彈出框)2秒后定時(shí)消失的實(shí)現(xiàn)代碼
Bootstrap Popover(彈出框)是使用定制的 Jquery 插件創(chuàng)建的。它可以用來(lái)顯示任何元素的一些信息。這篇文章主要介紹了Bootstrap的popover(彈出框)2秒后定時(shí)消失功能,需要的朋友參考下2017-02-02JS實(shí)現(xiàn)方向鍵切換輸入框焦點(diǎn)的方法
這篇文章主要介紹了JS實(shí)現(xiàn)方向鍵切換輸入框焦點(diǎn)的方法,涉及javascript鼠標(biāo)事件及頁(yè)面元素焦點(diǎn)的切換實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08JavaScript中的執(zhí)行環(huán)境和作用域鏈
這篇文章主要介紹了JavaScript中的執(zhí)行環(huán)境和作用域鏈,幫助大家更好的理解和學(xué)習(xí)JavaScript,感興趣的朋友可以了解下2020-09-09