控制輸入框的樣式與內容
當輸入框中無內容時,顯示提示信息,有內容時,顯示輸入的內容。
比如:一個搜索框,當沒有內容時,框內顯示“請輸入關鍵字...”
但輸入內容不爲空時,顯示輸入的文字。
具體實現代碼如下:
<!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>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<label>
<input type="text" name="control" value="請輸入關鍵字..." οnfοcus="if(this.value=='請輸入關鍵字...') this.value=''" οnblur="if(this.value=='') this.value='請輸入關鍵字...'"/>
</label>
</form>
</body>
</html>
說明:onfocus是當輸入框獲取焦點時觸發。onblur當輸入框失去焦點時觸發
上面的輸入框很不好看,現在添加樣式,改變輸入框的樣式。
在<head></head>之間添加如下代碼:
<style type="text/css">
input
{
font-size:16px;
height:25px;
line-height:25px;
width:200px;
color: #CCFFCC;
border: #CCCCCC 1px solid;
background-color: #003333;
}
</style>