javascript搜索框效果实现方法
本文实例讲述了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程序设计有所帮助。
-
本文向大家介绍js实现YouKu的漂亮搜索框效果，包括了js实现YouKu的漂亮搜索框效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js实现YouKu的漂亮搜索框效果。分享给大家供大家参考。具体如下： 运行效果如下图所示： 在线演示地址如下： http://demo.jb51.net/js/2015/js-youku-search-style-codes/ 具体代码如下： 希望本文所
-
本文向大家介绍javascript实现类似于新浪微博搜索框弹出效果的方法，包括了javascript实现类似于新浪微博搜索框弹出效果的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了javascript实现类似于新浪微博搜索框弹出效果的方法。分享给大家供大家参考。具体实现方法如下： 运行效果如下： 希望本文所述对大家的javascript程序设计有所帮助。
-
本文向大家介绍js实现搜索栏效果，包括了js实现搜索栏效果的使用技巧和注意事项，需要的朋友参考一下 小编这边主要是介绍一个js中搜索栏的实现（没有提交数据那些），重点在于对焦点问题的理解。 那么这边小编就是要实现这样的一个搜索框 对焦点的理解： 通俗来讲当我们鼠标单击一个盒子时光标停留在该盒子事件上实现用户与栏之间的交互，这样就表明该盒子获取了焦点，以案例来说我们平常搜索栏点击可以输入文字，这个时
-
本文向大家介绍基于Vue.js 2.0实现百度搜索框效果，包括了基于Vue.js 2.0实现百度搜索框效果的使用技巧和注意事项，需要的朋友参考一下 使用Vue.js 2.0 模仿百度搜索框效果，供大家参考，具体内容如下 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍自动完成的搜索框javascript实现，包括了自动完成的搜索框javascript实现的使用技巧和注意事项，需要的朋友参考一下 在很多需要搜索的网站, 都会有一个自动完成的搜索框. 方便用户查找他们想要的搜索词. 帮助用户快速找到自己想要的结果. 这种方式是比较友好的. 所以是比较提倡使用的. 我们这次就来实现这一效果. 我们通过两篇文章来进行讲解. 首先我们来完成界面的设计布局.
-
本文向大家介绍基于JavaScript实现弹出框效果，包括了基于JavaScript实现弹出框效果的使用技巧和注意事项，需要的朋友参考一下 弹出框在网站页面中是必不可少的一部分，今天借助呐喊教程平台给大家分享使用js实现简单的弹出框效果，本文写不好，还请见谅！ 首先我们来分析弹出框的部件.简单弹出框分为头,内容,尾部. 头部中有标题和关闭按钮,内容就可以图文,媒体,iframe,flash等等