javascript搜索框效果实现方法


Posted in Javascript onMay 14, 2015

本文实例讲述了javascript搜索框效果实现方法。分享给大家供大家参考。具体实现方法如下:

<!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=utf-8" />
<title>搜索框效果</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>
<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>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript修改css样式style
Apr 15 Javascript
教你如何解密js/vbs/vbscript加密的编码异处理小结
Jun 25 Javascript
jquery文字上下滚动的实现方法
Mar 22 Javascript
javascript教程之不完整的继承(js原型链)
Jan 13 Javascript
js实现简单随机抽奖的方法
Jan 27 Javascript
js实现选中页面文字将其分享到新浪微博
Nov 05 Javascript
JS简单编号生成器实现方法(附demo源码下载)
Apr 05 Javascript
JQuery ZTree使用方法详解
Jan 07 Javascript
遍历json获得数据的几种方法小结
Jan 21 Javascript
基于JavaScript实现类名的添加与移除
Apr 23 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
May 07 Javascript
微信小程序组件生命周期的踩坑记录
Mar 03 Javascript
javascript操作ul中li的方法
May 14 #Javascript
javascript中createElement的两种创建方式
May 14 #Javascript
javascript常用方法总结
May 14 #Javascript
javascript实现动态改变层大小的方法
May 14 #Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
May 14 #Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
May 13 #Javascript
JS实现简洁、全兼容的拖动层实例
May 13 #Javascript
You might like
PHP的开发框架的现状和展望
2007/03/16 PHP
php中unlink()、mkdir()、rmdir()等方法的使用介绍
2012/12/21 PHP
smarty模板局部缓存方法使用示例
2014/06/17 PHP
php实现点击可刷新验证码
2015/11/07 PHP
php从数据库读取数据,并以json格式返回数据的方法
2018/08/21 PHP
Javascript中的var_dump函数实现代码
2009/09/07 Javascript
基于jquery的button默认enter事件(回车事件)。
2011/05/18 Javascript
分享两段简单的JS代码防止SQL注入
2016/04/12 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
2016/10/15 Javascript
js滚轮事件兼容性问题需要注意哪些
2016/11/15 Javascript
详解vue-router基本使用
2017/04/18 Javascript
jQuery ajax动态生成table功能示例
2017/06/14 jQuery
Vue路由跳转问题记录详解
2017/06/15 Javascript
详解升级react-router 4 踩坑指南
2017/08/14 Javascript
Vue和React组件之间的传值方式详解
2019/01/31 Javascript
微信小程序云开发之使用云函数
2019/05/17 Javascript
python目录操作之python遍历文件夹后将结果存储为xml
2014/01/27 Python
python 并发编程 多路复用IO模型详解
2019/08/20 Python
40个你可能不知道的Python技巧附代码
2020/01/29 Python
Python3标准库之dbm UNIX键-值数据库问题
2020/03/24 Python
零基础学python应该从哪里入手
2020/08/11 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
GLAMGLOW香港官网:明星出镜前的秘密武器
2017/03/16 全球购物
用C语言实现文件读写操作
2013/10/27 面试题
计算 s=(x*y)1/2,用两个宏定义来实现
2016/08/11 面试题
中科软测试工程师面试题
2012/06/16 面试题
服装销售人员求职自我评价
2013/09/26 职场文书
建筑院校毕业生求职信
2014/06/13 职场文书
春节超市活动方案
2014/08/14 职场文书
房屋买卖授权委托书
2014/09/27 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
六查六看心得体会
2014/10/14 职场文书
测量JavaScript函数的性能各种方式对比
2021/04/27 Javascript
浅谈CSS不规则边框的生成方案
2021/05/25 HTML / CSS
5道关于python基础 while循环练习题
2021/11/27 Python
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers