js控制輸入框獲得和失去焦點(diǎn)時(shí)狀態(tài)顯示的方法

更新時(shí)間：2015年01月30日 10:51:42 作者：comeonstone

這篇文章主要介紹了js控制輸入框獲得和失去焦點(diǎn)時(shí)狀態(tài)顯示的方法,可實(shí)現(xiàn)判斷輸入框的焦點(diǎn)狀態(tài)設(shè)置不同樣式的功能,是非常實(shí)用的技巧,需要的朋友可以參考下

本文實(shí)例講述了js控制輸入框獲得和失去焦點(diǎn)時(shí)狀態(tài)顯示的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>邊框變色</title> 
<style type="text/css"> 
<!-- 
.SearchKeyword {border:1px solid #797A75;width: 202px;color: #CDCDCD;font-size:12px;} 
.SearchKeywordonFocus {border:1px solid #ABCD3A;width: 202px;color: #000000;font-size:12px;} 
--> 
</style> 
<script language="javascript"> 
function keywordfocus() 
{ 
if (document.formSearch.keyword.value == '請(qǐng)輸入關(guān)鍵字') 
{ 
document.formSearch.keyword.value = ''; 
document.formSearch.keyword.className = 'SearchKeywordonFocus'; 
} 
} 
function keywordblur() 
{ 
if (document.formSearch.keyword.value == '') 
{ 
document.formSearch.keyword.value = '請(qǐng)輸入關(guān)鍵字'; 
document.formSearch.keyword.className = 'SearchKeyword'; 
} 
} 
</SCRIPT> 
</head> 
<body> 
<form id="formSearch" name="formSearch" method="post" action=""> 
<input type="text" name="keyword" class="SearchKeyword" value="請(qǐng)輸入關(guān)鍵字" onFocus="keywordfocus();" onBlur="keywordblur();" /> 
</form> 
</body> 
</html>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

JavaScript中遞歸實(shí)現(xiàn)的方法及其區(qū)別
遞歸函數(shù)是在通過(guò)名字調(diào)用自身的情況下構(gòu)成的。下面通過(guò)本文給大家分享JavaScript中遞歸實(shí)現(xiàn)的方法及其區(qū)別，感興趣的朋友一起看看吧
2017-09-09
JavaScript 語(yǔ)言基礎(chǔ)知識(shí)點(diǎn)總結(jié)（思維導(dǎo)圖）
這篇文章通過(guò)思維導(dǎo)圖格式總結(jié)了JavaScript 語(yǔ)言基礎(chǔ)知識(shí)點(diǎn)，想要學(xué)習(xí)js的朋友可以參考下
2013-11-11
JavaScript組件開(kāi)發(fā)之輸入框加候選框
本文給大家分享基于js組件開(kāi)發(fā)的輸入框加候選框的實(shí)例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下
2017-03-03
使用正則表達(dá)式的格式化與高亮顯示json字符串
這篇文章主要介紹了使用正則表達(dá)式的格式化與高亮顯示json字符串的方法，非常的簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2014-12-12
director.js實(shí)現(xiàn)前端路由使用實(shí)例
這篇文章主要介紹了director.js實(shí)現(xiàn)前端路由使用實(shí)例,director.js是最純粹的路由注冊(cè)/解析器,它在不刷新頁(yè)面的情況下,利用“#”符號(hào)組織不同的URL路徑,需要的朋友可以參考下
2015-02-02
JavaScript使用Promise實(shí)現(xiàn)并發(fā)請(qǐng)求數(shù)限制
本文主要介紹了JavaScript使用Promise實(shí)現(xiàn)并發(fā)請(qǐng)求數(shù)限制，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
js生成的驗(yàn)證碼的實(shí)現(xiàn)與技術(shù)分析
本文主要是分享了一段由JS生成驗(yàn)證碼并驗(yàn)證的代碼，非常簡(jiǎn)單，并分析了此方法的實(shí)用性，提供給大家參考下
2014-09-09
Bootstrap禁用響應(yīng)式布局的實(shí)現(xiàn)方法
這篇文章主要介紹了Bootstrap禁用響應(yīng)式布局的實(shí)現(xiàn)方法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-03-03
基于zepto.js實(shí)現(xiàn)登錄界面
這篇文章主要為大家詳細(xì)介紹了使用zepto.js，純JS寫(xiě)的登錄界面，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-10-10
JS實(shí)現(xiàn)單行文字不間斷向上滾動(dòng)的方法
這篇文章主要介紹了JS實(shí)現(xiàn)單行文字不間斷向上滾動(dòng)的方法,以實(shí)例形式較為詳細(xì)的分析了文字滾動(dòng)效果實(shí)現(xiàn)的原理與技巧,需要的朋友可以參考下
2015-01-01