當前文字框高亮效果程式碼例項
本章節分享一段程式碼例項,它實現了當前獲取焦點的文字框高亮效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> div { width: 242px; height: 100px; border: 1px solid #171615; background-color: #FFC107; text-align: center; margin: 0 auto; line-height: 43px; } .add_class { border: 2px solid #5A4944; background-color: #E8E6D2; } </style> <script> window.onload = function () { var oInput = document.getElementsByTagName('input'); for (var index = 0; index < oInput.length; index++) { oInput[index].onfocus = function () { this.className = "add_class"; }; oInput[index].onblur = function () { this.className = ""; } } } </script> </head> <body> <div id="exdiv"> <label> <span>賬號:</span> <input type="text"> </label> <label> <span>密碼:</span> <input type="text"> </label> </div> </body> </html>
相關文章
- input文字框圓角效果程式碼例項
- 密碼框提示文字效果程式碼例項密碼
- js點選文字框選中文字效果程式碼例項JS
- textarea文字框輸入文字數目倒計效果程式碼例項
- 實現密碼框預設文字效果例項程式碼密碼
- 模擬實現文字框游標效果程式碼例項
- 文字嵌入邊框程式碼例項
- 密碼框提示文字程式碼例項密碼
- 實現多個文字框輸入同步效果程式碼例項
- css內邊框效果程式碼例項CSS
- 文字框與文字垂直對齊程式碼例項
- 文字框輸入內容實現智慧提示效果程式碼例項
- JavaScript當前tr行高亮效果JavaScript
- CSS文字模糊效果程式碼例項CSS
- 密碼框輸入提示效果程式碼例項密碼
- 文字框點選清除預設文字例項程式碼
- 讓input文字框文字垂直居中程式碼例項
- div css搜尋框效果程式碼例項CSS
- 文字框高度自適應例項程式碼
- js動態建立文字框程式碼例項JS
- js實現文字框提示程式碼例項JS
- 選中文字框文字觸發事件程式碼例項事件
- 點選按鈕複製文字框文字程式碼例項
- div前後翻轉效果程式碼例項
- textarea文字框高度自適應程式碼例項
- js獲取當前月份例項程式碼JS
- css優化文字顯示效果程式碼例項CSS優化
- CSS如何讓文字豎排效果例項程式碼CSS
- jQuery點選文字框清除內容程式碼例項jQuery
- js判斷文字框是否為空程式碼例項JS
- 限定文字框只能輸入數字例項程式碼
- 文字框輸入數字倒計例項程式碼
- 文字框獲得和失去焦點程式碼例項
- js檢測文字框是否為空程式碼例項JS
- javascript關閉當前視窗例項程式碼JavaScript
- CSS3文字凹凸效果程式碼例項CSSS3
- css多行文字底部虛線效果程式碼例項CSS
- css3鋸齒形邊框效果程式碼例項CSSS3