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 相关文章推荐
使用IE的地址栏来辅助调试Web页脚本
Mar 08 Javascript
非常漂亮的JS代码经典广告
Oct 21 Javascript
Javascript 学习书 推荐
Jun 13 Javascript
javascript事件冒泡详解和捕获、阻止方法
Apr 12 Javascript
基于Vuejs实现购物车功能
Aug 02 Javascript
详细总结Javascript中的焦点管理
Sep 17 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
Nov 21 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
May 31 Javascript
VueJs 将接口用webpack代理到本地的方法
Nov 27 Javascript
react-native滑动吸顶效果的实现过程
Jun 03 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
Jun 13 Javascript
Javascript var变量删除原理及实现
Aug 26 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分页类的代码
2011/05/18 PHP
php中ftp_chdir与ftp_cdup函数用法
2014/11/18 PHP
PHP输出缓冲控制Output Control系列函数详解
2015/07/02 PHP
php自定义函数实现汉字转换utf8编码的方法
2016/09/29 PHP
简单实现PHP留言板功能
2016/12/21 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
select组合框option的捕捉实例代码
2008/09/30 Javascript
jQuery Validation实例代码 让验证变得如此容易
2010/10/18 Javascript
javascript分页代码(当前页码居中)
2012/09/20 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
2013/06/24 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
2014/05/11 Javascript
setTimeout()递归调用不加引号出错的解决方法
2014/09/05 Javascript
JS获得选取checkbox整行数据的方法
2015/01/28 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
2015/12/02 Javascript
基于jquery编写分页插件
2016/03/07 Javascript
JavaScript登录验证码的实现
2016/10/27 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
2017/02/14 Javascript
关于Node.js的events.EventEmitter用法介绍
2017/04/01 Javascript
angularJS1 url中携带参数的获取方法
2018/10/09 Javascript
angularJS实现不同视图同步刷新详解
2018/10/09 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
简单的Python的curses库使用教程
2015/04/11 Python
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
Python连接Redis的基本配置方法
2018/09/13 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
用python绘制樱花树
2020/10/09 Python
美国高品质个性化珠宝销售网站:Jewlr
2018/05/03 全球购物
JSF面试题:Jsf中导航的标签是什么
2013/04/20 面试题
2014年社会实践活动总结范文
2014/04/29 职场文书
机关班子查摆问题及整改措施
2014/10/28 职场文书
优秀教研组申报材料
2014/12/26 职场文书
求职简历自我评价范文
2015/03/10 职场文书
教师聘用意向书
2015/05/11 职场文书
付款证明模板
2015/06/19 职场文书
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫