javascript 搜索框效果示例

发布时间:2019-07-17编辑:脚本学堂
本文介绍了javascript 搜索框效果的实现代码,用js代码检测搜索框的输入与设置搜索框样式,有需要的朋友参考下。

例子,js 搜索框效果综合实例。
 

复制代码 代码示例:
<!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>
<title>搜索框效果_www.jb200.com</title>
<script type="text/javascript">
function iniEvent() {
 var txtSearch = document.getElementById("txtSearch");
 txtSearch.onfocus = function () {
 if (this.value == "请输入关键字" || this.value == "") {
     this.value = "";
     this.style.color = "black"; //修改文本框字体颜色
 }
 }
 txtSearch.onblur = function () {
 if (this.value == "请输入关键字" || this.value == "") {
     this.value = "请输入关键字";
     this.style.color = "red";   //修改文本框字体颜色
 }
     else {
      this.style.color = "black";
  }
 }
}
</script>
</head> 脚本学堂 www.jb200.com
<body onload="iniEvent()">
    <!--文字离开如果文本框为空则显示红色的"请输入关键字"-->
    <!--<label for="txtSearch">查找</label><input type="text" id="txtSearch" value="请输入关键字" style="color:red" />-->
    查找<input type="text" id="txtSearch" value="请输入关键字" style="color:red" /><br /><input type="text" />
</body>
</html>