HTML部分代码:

——————————————————————————————————————————————————————————————

<div class="search_box">

<from>

                <ul class="search_ul">

                    <li><input  type="text" name="point" value="地点" onblur="returnvalue(this, '地点')" onfocus="Search(this, '地点')" id="obj1"  style="color:#999;"/></li>

                    <li><input  type="text" name="point" value="请输入关键字" onblur="returnvalue(this, '请输入关键字')" onfocus="Search(this, '请输入关键字')" style="color:#999;"/></li>

                    <li class="li_color"><input type="button" name="search" value="搜索" /></li>

                </ul>

            </from>

</div>

js样式:

———————————————————————————————————————————————————————————————

//得到焦点触发事件

function Search(element,elementvalue)

{

if(element.value==elementvalue)

{

element.value="";

element.style.color="#000";

}

}

//离开输入框时触发事件

function returnvalue(element,elementvalue)

{

if(element.value=="" || element.value.replace(/\s/g,"")=="")

{

element.value=elementvalue;

element.style.color="#999";


}

}

搜索框js样式(通用型)的更多相关文章

  1. 开发手机APP过程,不同使用场景APP搜索框的样式及区别

    搜索框是 app 内最常见的控件之一,可以帮助用户快速又精准找到期望的内容与功能.不同的使用场景下,根据页面中搜索的重要程度,搜索框也有着不同的样式. 下面就常州开发APP公司和大家聊聊常见的四种样式 ...

  2. js搜索框 js仿百度搜索 js下拉框 jQuery.Autocomplete使用

    做了一个网站,需要根据文本框的输入模糊搜索数据库内容给出提示供用户选择,就找到了jQuery.Autocomplete 效果如下图: 该插件托管在github上,具体地址:https://github ...

  3. iOS开发UI篇 -- UISearchBar 属性、方法详解及应用(自定义搜索框样式)

    很多APP都会涉及到搜索框,苹果也为我们提供了默认的搜索框UISearchBar.但实际项目中我们通常需要更改系统默认搜索框的样式.为了实现这一目标,我们需要先搞懂 UISearchBar 的属性及方 ...

  4. 带搜索框的jQuery下拉框插件

    由于下拉框的条数有几十个,于是打算找一个可以搜索查找功能的下拉框,刚开始在网上看了几个,都是有浏览器兼容性问题,后来看到这个“带搜索框的jQuery下拉框美化插件 searchable”,看演示代码简 ...

  5. js实现百度搜索框滑动固定顶部

    现在很多主流系统例如百度.有道.爱奇艺等的搜索框都有一个特点,滑动到刚好看不到搜索框时,固定搜索框到顶部,这也算是一个对用户友好型的操 作. 在看了百度的js和css后自己摸索出来实现效果,还是学艺不 ...

  6. 通过cookie实现搜索框内容保存关闭浏览器之前的操作、jq js实现方法

    jq实现的方法: jq需要在页面中引入JQ.cookie插件 这是一个超轻量级插件 要实现的效果: 下面是jq代码: $(function(){ var til=$("#orderInfoC ...

  7. 【转】如何建立一个样式新颖的CSS3搜索框

    在线演示 搜索框大概是web开发中最常用的UI元素之一,我想基本没有必要去介绍如何使用它.无论是网站还是web应用,都会为了增强用户体验而添加它,那么你是不是也想过设计一个别致的搜索框? 在今天的文章 ...

  8. 自定义webkit搜索框样式

    好吧,这是个有点儿蛋疼的文章,每个浏览器都可以有自己的行为和表现,只是webkit在apple的带领下,在UI上走的更远了一点儿,但是却给我们带来了点儿困扰,因为很多情况下,我们希望搜索框在所有的浏览 ...

  9. js之搜索框

    目标效果:点击搜索框,搜索框内提示信息消失,可输入搜索信息,点击搜索框外搜索框如果没提示信息或者为空时,显示搜索框提示信息,如果有搜索信息,显示搜索信息. 代码如下: <!DOCTYPE htm ...

随机推荐

  1. WPF之MVVM(Step2)——自己实现DelegateCommand:ICommand

    在自己实现MVVM时,上一篇的实现方式基本是不用,因其对于命令的处理不够方便,没写一个命令都需要另加一个Command的类.此篇主要介绍DelegateCommand来解决上面所遇到的问题. 首先,我 ...

  2. CF735C 数论\平衡树叶子节点的最大深度\贪心\斐波那契\条件归一化

    http://codeforces.com/problemset/problem/735/C 题意..采用淘汰赛制..只要打输就退出比赛..而且只有两个选手打过的场数 相差不超过1才能比赛..最后问你 ...

  3. 生成n位随机字符串

    --1.借助newid() Go --创建视图(因为在函数中无法直接使用newid()) create view vnewid as select newid() N'MacoId'; go --创建 ...

  4. 关于main函数传参数的问题

    argc是命令行总的参数个数      argv[]是argc个参数,其中第0个参数是程序的全名,以后的参数      命令行后面跟的用户输入的参数,比如:      int   main(int   ...

  5. static 类成员变量 和 static const类成员变量

    1.使用static类的优点: (1)避免与其他类的成员或者全局变量冲突 (2)可以封装 (3)阅读性好 2.static 数据成员独立于该类的任意对象而存在 static数据成员的类型可以是该成员所 ...

  6. 用padding与margin做多个元素的等间距分布

    这样做的好处是不管有多少个元素等间距分布,都可以直接写在li中,而且由于是给a设定的样式,所以在字数不一致的情况下,样式仍然是统一的. html: <!DOCTYPE html> < ...

  7. css/js(工作中遇到的问题)

    移动设备点击时去掉外加的蓝色边框 a, input, button { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highligh ...

  8. express-8 Handlebars模板引擎(1)

    简介 使用JavaScript生成一些HTML document.write('<h1>Please Don\'t Do This</h1>'); document.write ...

  9. json返回数据库的时间格式为/Date(1477294037000)/,怎样在前台进行格式化转换

    方法一: 原理是取中间的数,再转换成js的Date类型 function ChangeDateFormat(val) { if (val != null) { var date = new Date( ...

  10. Swift3.0语言教程获取字符串编码与哈希地址

    Swift3.0语言教程获取字符串编码与哈希地址 Swift3.0语言教程获取字符串编码与哈希地址,以下将讲解字符串中其它内容的获取方法. 1.获取字符串编码 在NSString中可以使用2个属性获取 ...