控制輸入框的樣式與內容

控制輸入框的樣式與內容
當輸入框中無內容時,顯示提示信息,有內容時,顯示輸入的內容。
比如:一個搜索框,當沒有內容時,框內顯示“請輸入關鍵字...”
但輸入內容不爲空時,顯示輸入的文字。
具體實現代碼如下:
<!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>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章