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事件一章節。
相關文章
- JQuery設定文字框和密碼框獲得焦點時樣式jQuery密碼
- JavaScript文字框獲取焦點彈出tipsJavaScript
- input文字框獲取焦點伸縮效果
- vue中文字框自動獲取焦點Vue
- 滑鼠滑過和獲取焦點樣式
- ant-design輸入框自動獲取焦點
- input文字框焦點背景變色
- CSS 設定文字樣式CSS
- CSS input 文字框樣式CSS
- CSS input文字框樣式CSS
- CSS 設定placeholder文字樣式CSS
- 去掉antd的Input元件獲取焦點時的藍色邊框元件
- 動態新增或減少文字框,並獲取文字框值
- Javascript 獲取 Dom 樣式的方法有哪些JavaScript
- CSS設定半個文字的樣式CSS
- 【Javascript】獲取選中的文字JavaScript
- JavaScript 獲取主機名程式碼JavaScript
- 直播系統app原始碼,設定樣式(字型樣式、行列寬高、對齊方式、邊框)APP原始碼
- RecyclerView設定預設焦點跟多頁面焦點搶佔View
- 直播系統程式碼,Android獲取、設定鎖屏密碼Android密碼
- 對焦取框演算法演算法
- JavaScript新增class樣式類程式碼JavaScript
- jQuery點選文字框清除內容程式碼例項jQuery
- CSS設定div邊框演示程式碼CSS
- 成品直播原始碼,設定樣式(字型樣式、行列寬高、對齊方式、邊框、填充和漸變)原始碼
- cad點樣式快捷鍵命令大全 cad點樣式怎麼設定
- CSS 設定文字框游標顏色CSS
- Java 設定Word文字框中的文字旋轉方向Java
- Javascript 怎樣獲取副檔名?JavaScript
- 直播網站程式原始碼,給元件按鈕、文字編輯框等設定圓形邊框、顏色網站原始碼元件
- CSS 設定元素第一行文字樣式CSS
- 【Android】一行程式碼設定Shape Selector樣式Android行程
- JavaScript讀取文字檔案內容程式碼例項JavaScript
- JavaScript 獲取網頁尾本程式碼內容JavaScript網頁
- JavaScript獲取給定字元的unicodeJavaScript字元Unicode
- delphi cxgrid 自定義畫焦點框
- C# 設定Word文字框中的文字旋轉方向C#
- JavaScript點選設定背景顏色的選項卡程式碼JavaScript
- 自定義jqGrid編輯功能,當行獲取焦點時編輯,失去焦點時儲存