javascript文字框獲取焦點設定其樣式程式碼
本章節分享一段程式碼例項,它實現了文字框獲取焦點能夠設定文字框樣式的效果。
其實使用純css也可以實現此功能,具體可以參閱css實現的文字框focus獲取焦點設定樣式程式碼例項一章節。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script> window.onload=function(){ var otxt=document.getElementById("txt"); otxt.onfocus=function(){ this.style.backgroundColor="#ccc"; this.style.color="green"; } otxt.onblur=function(){ this.style.backgroundColor=""; this.style.color=""; } } </script> <head> </head> <body> <input id="txt" type="text" value="螞蟻部落歡迎您"/> </body> </html>
上面的程式碼實現了我們的要求,程式碼比較簡單,更多內容可以參閱相關閱讀。
相關閱讀:
(1).onfocus事件可以參閱javascript focus事件一章節。
(2).onblur事件可以參閱javascript blur事件一章節。
相關文章
- 文字框獲取焦點設定樣式
- css 文字框focus獲取焦點設定樣式程式碼例項CSS
- CSS實現的文字框獲取焦點設定樣式程式碼CSS
- 純css設定input文字框獲取焦點時的樣式CSS
- JQuery設定文字框和密碼框獲得焦點時樣式jQuery密碼
- 獲得焦點時候設定文字框的樣式
- javascript當文字框獲得焦點設定邊框JavaScript
- js讓文字框獲取焦點程式碼JS
- 設定文字框得到焦點或者失去焦點時的樣式
- 文字框獲取或者失去焦點改變樣式屬性
- JavaScript文字框獲取焦點彈出tipsJavaScript
- jQuery文字框獲取焦點和失去焦點jQuery
- jQuery實現文字框獲取焦點jQuery
- input文字框獲取焦點伸縮效果
- 純css實現控制文字框獲得焦點的樣式CSS
- 文字框獲得和失去焦點程式碼例項
- jquery註冊文字框獲取焦點清空,失去焦點賦值jQuery賦值
- vue中文字框自動獲取焦點Vue
- 如何使用angularjs實現文字框獲取焦點AngularJS
- CSS 設定input文字框樣式CSS
- css設定input文字框樣式CSS
- JavaScript獲取input text文字框JavaScript
- 點選獲取焦點可以伸縮的搜尋框程式碼例項
- ueditor文字框初始化如何顯示預設內容,以及文字框獲取焦點後清空預設內容
- 單獨設定input text文字框樣式
- 設定input type為text的文字框樣式
- javascript如何獲取哪個元素獲得焦點JavaScript
- CSS設定元素邊框樣式例項程式碼CSS
- 點選方向鍵實現文字框焦點切換程式碼例項
- javascript設定或者獲取cookie程式碼例項JavaScriptCookie
- javascript實現的文字框焦點位置放置於尾部JavaScript
- input文字框焦點背景變色
- JavaScript設定input文字框只讀JavaScript
- 文字框點選清除預設文字例項程式碼
- javascript設定和獲取cookie值程式碼例項JavaScriptCookie
- 設定谷歌瀏覽器其滾動條樣式程式碼谷歌瀏覽器
- 文字框失去焦點即刻進行表單驗證程式碼例項
- javascript通用獲取元素樣式屬性值程式碼例項JavaScript