JS實(shí)現(xiàn)點(diǎn)擊文本框改變背景顏色
本文實(shí)例為大家分享了JS實(shí)現(xiàn)點(diǎn)擊文本框改變背景顏色的具體代碼,供大家參考,具體內(nèi)容如下
代碼如下:
<!DOCTYPE html> <html> ?? ?<head> ?? ??? ?<meta charset="utf-8" /> ?? ??? ?<title>文本框獲焦點(diǎn)改變背景顏色</title> ?? ?</head> ?? ?<body> ?? ??? ?<table align="center"width="337" height="204"border=()> ?? ??? ?<tr> ?? ??? ??? ?<td width="108">用戶名</td> ?? ??? ?<td width="213"><form name="form1"method="post"action=""> ?? ??? ??? ?<input type="text"name="textfield"onfocus="txtfocus()"onBlur="txtblur()"> ?? ??? ?</form></td> ?? ??? ?</tr> ?? ??? ?<tr> ?? ??? ??? ?<td >密碼</td> ?? ??? ?<td ><form name="form2"method="post"action=""> ?? ??? ??? ?<input type="text"name="textfield2"onfocus="txtfocus()"onBlur="txtblur()"> ?? ??? ?</form></td> ?? ??? ?</tr> ?? ??? ?<tr> ?? ??? ??? ?<td >真實(shí)姓名</td> ?? ??? ?<td ><form name="form3"method="post"action=""> ?? ??? ??? ?<input type="text"name="textfield3"onfocus="txtfocus()"onBlur="txtblur()"> ?? ??? ?</form></td> ?? ??? ?</tr> ?? ??? ?<tr> ?? ??? ??? ?<td >性別</td> ?? ??? ?<td ><form name="form4"method="post"action=""> ?? ??? ??? ?<input type="text"name="textfield5"onfocus="txtfocus()"onBlur="txtblur()"> ?? ??? ?</form></td> ?? ??? ?</tr> ?? ??? ?<tr> ?? ??? ??? ?<td >郵箱</td> ?? ??? ?<td ><form name="form5"method="post"action=""> ?? ??? ??? ?<input type="text"name="textfield4"onfocus="txtfocus()"onBlur="txtblur()"> ?? ??? ?</form></td> ?? ??? ?</tr> ?? ??? ?</table> ?? ??? ?<script language="JavaScript"> ?? ??? ??? ?<!-- ?? ??? ??? ?function txtfocus(event){ ?? ??? ??? ??? ?var e=window.event; ?? ??? ??? ??? ?var obj=e.srcElement; ?? ??? ??? ??? ?obj.style.background="#FF9966"; ?? ??? ??? ?} ?? ??? ??? ?function txtblur(event){ ?? ??? ??? ??? ?var e=window.event; ?? ??? ??? ??? ?var obj=e.srcElement; ?? ??? ??? ??? ?obj.style.background="#FFFFFF"; ?? ??? ??? ?} ?? ??? ??? ?//--> ?? ??? ?</script> ?? ??? ? ?? ?</body> </html>
結(jié)果如圖:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
ES6中Set和Map數(shù)據(jù)結(jié)構(gòu),Map與其它數(shù)據(jù)結(jié)構(gòu)互相轉(zhuǎn)換操作實(shí)例詳解
這篇文章主要介紹了ES6中Set和Map數(shù)據(jù)結(jié)構(gòu),Map與其它數(shù)據(jù)結(jié)構(gòu)互相轉(zhuǎn)換操作,結(jié)合實(shí)例形式詳細(xì)分析了ES6中的Set和Map數(shù)據(jù)結(jié)構(gòu)的概念、原理、遍歷、去重等操作,以及Map與其它數(shù)據(jù)結(jié)構(gòu)互相轉(zhuǎn)換操作,需要的朋友可以參考下2019-02-02JavaScript通過(guò)事件代理高亮顯示表格行的方法
這篇文章主要介紹了JavaScript通過(guò)事件代理高亮顯示表格行的方法,涉及javascript事件代理及頁(yè)面元素的操作技巧,需要的朋友可以參考下2015-05-05js實(shí)現(xiàn)DIV的一些簡(jiǎn)單控制
js實(shí)現(xiàn)DIV的一些簡(jiǎn)單控制...2007-06-06詳解使用Nuxt.js快速搭建服務(wù)端渲染(SSR)應(yīng)用
這篇文章主要介紹了詳解使用Nuxt.js快速搭建服務(wù)端渲染(SSR)應(yīng)用,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03JS中的六種繼承方式以及優(yōu)缺點(diǎn)總結(jié)
JS作為面向?qū)ο蟮娜躅?lèi)型語(yǔ)言,繼承也是其非常強(qiáng)大的特性之一,那么如何在JS中實(shí)現(xiàn)繼承呢?下面這篇文章主要給大家介紹了關(guān)于JS中六種繼承方式以及優(yōu)缺點(diǎn)的相關(guān)資料,需要的朋友可以參考下2021-10-10JavaScript寫(xiě)個(gè)貪吃蛇小游戲(超詳細(xì))
這篇文章主要介紹了JavaScript寫(xiě)個(gè)貪吃蛇小游戲(超詳細(xì)),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03