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 相关文章推荐
利用jQuery 实现GridView异步排序、分页的代码
Feb 06 Javascript
仅用[]()+!等符号就足以实现几乎任意Javascript代码
Mar 01 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
Jul 15 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
Oct 28 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 Javascript
原生js实现焦点轮播图效果
Jan 12 Javascript
详解Angular 4.x 动态创建组件
Apr 25 Javascript
JS触摸事件、手势事件详解
May 04 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
ReactNative 之FlatList使用及踩坑封装总结
Nov 29 Javascript
vue用递归组件写树形控件的实例代码
Jul 19 Javascript
Vue使用v-viewer实现图片预览
Oct 21 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 cookis创建实现代码
2009/03/16 PHP
PHP数组对比函数,存在交集则返回真,否则返回假
2011/02/03 PHP
php中使用临时表查询数据的一个例子
2013/02/03 PHP
PHP钩子与简单分发方式实例分析
2017/09/04 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
js闭包实例汇总
2014/11/09 Javascript
javascript框架设计之种子模块
2015/06/23 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
AngularJS入门教程之AngularJS模型
2016/04/18 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
2016/05/24 Javascript
javascript创建含数字字母的随机字符串方法总结
2016/08/01 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
2017/01/30 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
javascript 初学教程及五子棋小程序的简单实现
2017/07/04 Javascript
python requests 使用快速入门
2017/08/31 Python
详解python 注释、变量、类型
2018/08/10 Python
python时间序列按频率生成日期的方法
2019/05/14 Python
Pandas的read_csv函数参数分析详解
2019/07/02 Python
Python包,__init__.py功能与用法分析
2020/01/07 Python
Django models filter筛选条件详解
2020/03/16 Python
python如何使用腾讯云发送短信
2020/09/17 Python
Python request post上传文件常见要点
2020/11/20 Python
python爬虫破解字体加密案例详解
2021/03/02 Python
css3 伪元素和伪类选择器详解
2014/09/04 HTML / CSS
HTML5中使用postMessage实现两个网页间传递数据
2016/06/22 HTML / CSS
柯基袜:Corgi Socks
2017/01/26 全球购物
Bergfreunde丹麦:登山装备网上零售商
2017/02/26 全球购物
瀑布模型都有哪些优缺点
2014/06/23 面试题
营销学习心得体会
2014/09/12 职场文书
2014年防汛工作总结
2014/12/08 职场文书
敬老院志愿者活动总结
2015/05/06 职场文书
2015年乡镇食品安全工作总结
2015/10/22 职场文书
煤矿安全学习心得体会
2016/01/18 职场文书
Android基于Fresco实现圆角和圆形图片
2022/04/01 Java/Android
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS