本文实例讲述了js控制输入框获得和失去焦点时状态显示的方法。分享给大家供大家参考。具体实现方法如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<!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 == '请输入关键字' ) { document.formSearch.keyword.value = '' ; document.formSearch.keyword.className = 'SearchKeywordonFocus' ; } } function keywordblur() { if (document.formSearch.keyword.value == '' ) { document.formSearch.keyword.value = '请输入关键字' ; document.formSearch.keyword.className = 'SearchKeyword' ; } } </SCRIPT> </head> <body> <form id= "formSearch" name= "formSearch" method= "post" action= "" > <input type= "text" name= "keyword" class= "SearchKeyword" value= "请输入关键字" onFocus= "keywordfocus();" onBlur= "keywordblur();" /> </form> </body> </html> |
希望本文所述对大家的javascript程序设计有所帮助。