JS實(shí)現(xiàn)點(diǎn)擊文本框改變背景顏色
更新時(shí)間：2022年08月09日 08:41:13 作者：kiss_scarecrow
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)點(diǎn)擊文本框改變背景顏色，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(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擴(kuò)展運(yùn)算符的用途實(shí)例詳解
這篇文章主要介紹了ES6擴(kuò)展運(yùn)算符的用途 ,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-08-08
JavaScript實(shí)現(xiàn)簡(jiǎn)易輪播圖最全代碼解析(ES5)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)易輪播圖最全代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
JS二級(jí)菜單不同實(shí)現(xiàn)方法分析【4種方法】
這篇文章主要介紹了JS二級(jí)菜單不同實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了4種不同的二級(jí)下拉菜單實(shí)現(xiàn)方法,需要的朋友可以參考下2018-12-12
這篇文章主要通過一張圖讓你看懂JavaScript各類型的關(guān)系，需要的朋友可以參考下2015-10-10
ES6已經(jīng)不再是JavaScript最新的標(biāo)準(zhǔn)，但是它已經(jīng)廣泛用于編程實(shí)踐中。下面通過本文給大家分享前端開發(fā)不得不知的10個(gè)最佳ES6特性，感興趣的朋友參考下吧2017-08-08
這篇文章主要給大家介紹了關(guān)于微信小程序自定義tabBar的踩坑實(shí)踐記錄，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
JavaScript用二分法查找數(shù)據(jù)的實(shí)例代碼
本篇文章主要介紹了JavaScript用二分法查找數(shù)據(jù)的實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了二叉樹的非遞歸后序遍歷算法實(shí)例,需要的朋友可以參考下
2014-02-02 
深入理解JavaScript系列（35）：設(shè)計(jì)模式之迭代器模式詳解
這篇文章主要介紹了深入理解JavaScript系列（35）：設(shè)計(jì)模式之迭代器模式詳解,迭代器模式(Iterator)：提供一種方法順序一個(gè)聚合對(duì)象中各個(gè)元素,而又不暴露該對(duì)象內(nèi)部表示,需要的朋友可以參考下
2015-03-03