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 AJAX回调函数this指向问题
Feb 08 Javascript
jQuery prev ~ siblings选择器使用介绍
Aug 09 Javascript
浅析jQuery1.8的几个小变化
Dec 10 Javascript
js强制把网址设为默认首页
Sep 29 Javascript
js流动式效果显示当前系统时间
May 16 Javascript
javascript中Date对象应用之简易日历实现
Jul 12 Javascript
JS实现改变HTML上文字颜色和内容的方法
Dec 30 Javascript
Angular2使用vscode断点调试ts文件的方法
Dec 13 Javascript
vue实现组件之间传值功能示例
Jul 13 Javascript
JS实现的贪吃蛇游戏完整实例
Jan 18 Javascript
vue treeselect获取当前选中项的label实例
Aug 31 Javascript
javascript进阶篇深拷贝实现的四种方式
Jul 07 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使用websocket示例详解
2014/03/12 PHP
Yii2框架使用计划任务的方法
2016/05/25 PHP
thinkphp验证码的实现(form、ajax实现验证)
2016/07/28 PHP
yii2 resetful 授权验证详解
2017/05/18 PHP
php设计模式之中介者模式分析【星际争霸游戏案例】
2020/03/23 PHP
比Jquery的document.ready更快的方法
2010/04/28 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
Angular2下使用pdf插件的方法详解
2017/04/29 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
2017/07/06 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017/12/12 Javascript
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
vue.js中导出Excel表格的案例分析
2019/06/11 Javascript
vue导航栏部分的动态渲染实例
2019/11/01 Javascript
Python运用于数据分析的简单教程
2015/03/27 Python
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
对python中for、if、while的区别与比较方法
2018/06/25 Python
对Python random模块打乱数组顺序的实例讲解
2018/11/08 Python
Python列表list排列组合操作示例
2018/12/18 Python
代码详解django中数据库设置
2019/01/28 Python
python中的colorlog库使用详解
2019/07/05 Python
在django模板中实现超链接配置
2019/08/21 Python
Python基于jieba, wordcloud库生成中文词云
2020/05/13 Python
python实现梯度下降算法的实例详解
2020/08/17 Python
全面解析CSS Media媒体查询使用操作(推荐)
2017/08/15 HTML / CSS
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
NBA欧洲商店(西班牙):NBA Europe Store ES
2019/04/16 全球购物
意大利时尚精品店:Nugnes 1920
2020/02/10 全球购物
优秀老员工获奖感言
2014/02/15 职场文书
陈欧广告词
2014/03/14 职场文书
社区健康教育实施方案
2014/03/18 职场文书
教师节感恩老师演讲稿
2014/08/28 职场文书
学用政策心得体会
2014/09/10 职场文书
2014年残疾人工作总结
2014/12/06 职场文书
2015年人事专员工作总结
2015/04/29 职场文书
教师岗位说明书
2015/09/30 职场文书
Python测试框架pytest高阶用法全面详解
2022/06/01 Python