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的将桌面应用程序引入浏览器
Nov 19 Javascript
JS判断元素为数字的奇异写法分享
Aug 01 Javascript
window.navigate 与 window.location.href 的使用区别介绍
Sep 21 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
Oct 22 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
Nov 10 Javascript
JSON与XML的区别对比及案例应用
Nov 11 Javascript
Vue.js实战之组件的进阶
Apr 04 Javascript
利用JavaScript的%做隔行换色的实例
Nov 25 Javascript
微信小程序页面生命周期详解
Jan 31 Javascript
解决layui富文本编辑器图片上传无法回显的问题
Sep 18 Javascript
vue使用recorder.js实现录音功能
Nov 22 Javascript
vue中使用极验验证码的方法(附demo)
Dec 04 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编程效率的53个要点(经验小结)
2010/09/04 PHP
学习php中的正则表达式
2014/08/17 PHP
PHP图片处理之使用imagecopyresampled函数实现图片缩放例子
2014/11/19 PHP
php字符串截取函数用法分析
2014/11/25 PHP
JS获取IUSR_机器名和IWAM_机器名帐号的密码
2006/12/06 Javascript
可缩放Reloaded-一个针对可缩放元素的复用组件
2007/03/10 Javascript
javascript parseInt 函数分析(转)
2009/03/21 Javascript
JavaScript 数组循环引起的思考
2010/01/01 Javascript
JS延迟加载(setTimeout) JS最后加载
2010/07/15 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
2013/05/03 Javascript
js触发select onchange事件的小技巧
2014/08/05 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
jQuery鼠标悬停内容动画切换效果
2017/04/27 jQuery
JS 调试中常见的报错问题解决方法
2017/05/20 Javascript
JavaScript进制转换实现方法解析
2020/01/18 Javascript
[01:20]辉夜杯背景故事宣传片《辉夜传说》
2015/12/25 DOTA
[02:09]DOTA2辉夜杯 EHOME夺冠举杯现场
2015/12/28 DOTA
Python语言技巧之三元运算符使用介绍
2013/03/04 Python
浅谈Python2获取中文文件名的编码问题
2018/01/09 Python
Python图像处理实现两幅图像合成一幅图像的方法【测试可用】
2019/01/04 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
关于tf.nn.dynamic_rnn返回值详解
2020/01/20 Python
opencv 实现特定颜色线条提取与定位操作
2020/06/02 Python
SIDESTEP荷兰:在线购买鞋子
2019/11/18 全球购物
CAT鞋加拿大官网:CAT Footwear加拿大
2020/08/05 全球购物
武汉世纪畅想数字传播有限公司.NET笔试题
2014/07/22 面试题
UNIX特点都有哪些
2016/04/05 面试题
金融行业职业生涯规划范文
2014/01/17 职场文书
社团活动总结
2014/04/28 职场文书
财政局党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
催款函范本大全
2015/06/24 职场文书
各类场合主持词开场白范文集锦
2019/08/16 职场文书
SQL实现LeetCode(175.联合两表)
2021/08/04 MySQL
sqlserver连接错误之SQL评估期已过的问题解决
2022/03/23 SQL Server
git stash(储藏)的用法总结
2022/06/25 Servers