搜索框js样式(通用型)
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样式(通用型)的更多相关文章
- 开发手机APP过程,不同使用场景APP搜索框的样式及区别
搜索框是 app 内最常见的控件之一,可以帮助用户快速又精准找到期望的内容与功能.不同的使用场景下,根据页面中搜索的重要程度,搜索框也有着不同的样式. 下面就常州开发APP公司和大家聊聊常见的四种样式 ...
- js搜索框 js仿百度搜索 js下拉框 jQuery.Autocomplete使用
做了一个网站,需要根据文本框的输入模糊搜索数据库内容给出提示供用户选择,就找到了jQuery.Autocomplete 效果如下图: 该插件托管在github上,具体地址:https://github ...
- iOS开发UI篇 -- UISearchBar 属性、方法详解及应用(自定义搜索框样式)
很多APP都会涉及到搜索框,苹果也为我们提供了默认的搜索框UISearchBar.但实际项目中我们通常需要更改系统默认搜索框的样式.为了实现这一目标,我们需要先搞懂 UISearchBar 的属性及方 ...
- 带搜索框的jQuery下拉框插件
由于下拉框的条数有几十个,于是打算找一个可以搜索查找功能的下拉框,刚开始在网上看了几个,都是有浏览器兼容性问题,后来看到这个“带搜索框的jQuery下拉框美化插件 searchable”,看演示代码简 ...
- js实现百度搜索框滑动固定顶部
现在很多主流系统例如百度.有道.爱奇艺等的搜索框都有一个特点,滑动到刚好看不到搜索框时,固定搜索框到顶部,这也算是一个对用户友好型的操 作. 在看了百度的js和css后自己摸索出来实现效果,还是学艺不 ...
- 通过cookie实现搜索框内容保存关闭浏览器之前的操作、jq js实现方法
jq实现的方法: jq需要在页面中引入JQ.cookie插件 这是一个超轻量级插件 要实现的效果: 下面是jq代码: $(function(){ var til=$("#orderInfoC ...
- 【转】如何建立一个样式新颖的CSS3搜索框
在线演示 搜索框大概是web开发中最常用的UI元素之一,我想基本没有必要去介绍如何使用它.无论是网站还是web应用,都会为了增强用户体验而添加它,那么你是不是也想过设计一个别致的搜索框? 在今天的文章 ...
- 自定义webkit搜索框样式
好吧,这是个有点儿蛋疼的文章,每个浏览器都可以有自己的行为和表现,只是webkit在apple的带领下,在UI上走的更远了一点儿,但是却给我们带来了点儿困扰,因为很多情况下,我们希望搜索框在所有的浏览 ...
- js之搜索框
目标效果:点击搜索框,搜索框内提示信息消失,可输入搜索信息,点击搜索框外搜索框如果没提示信息或者为空时,显示搜索框提示信息,如果有搜索信息,显示搜索信息. 代码如下: <!DOCTYPE htm ...
随机推荐
- Windows phone 8.0 本地化遇到的两个问题
基本上来说,按照msdn来讲的,本地化和全球化没有太多的问题,链接如下: http://msdn.microsoft.com/zh-cn/library/windowsphone/develop/ff ...
- C# 对象转换为byte[] ,byte[]还原对象
/// <summary> /// 将一个object对象序列化,返回一个byte[] /// </summary> /// <param name ...
- 如何离线下载Chrome的安装包
打开Chrome官网(自行搜索)点击下载后下载的是联网安装包,这对部分上网不方便的用户造成了一定的麻烦. http://www.google.cn/chrome/browser/desktop/ind ...
- 二维数组&多维数组
1.二维数组 二维数组由多个一维数组组成,其定义方式: ,]{ {,,,}, {,,,}, {,,,} }; 二维数组中括号中,逗号左边表示一维数组的个数,也可以说控制行,逗号后面的数表示每个一维数组 ...
- 大端模式 VS 小端模式
简单点说,就是字节的存储顺序,如果数据都是单字节的,那怎么存储无所谓了,但是对于多字节数据,比如int,double等,就要考虑存储的顺序了.注意字节序是硬件层面的东西,对于软件来说通常是透明的.再说 ...
- JavaScript入门(2)
encodeURI()和 decodeURI()作用 编码与解码 encodeURIComponent()和 decodeURIComponent()作用区别是 后者可以处理一些特殊字符进行转义 ...
- CentOS下vm虚拟机桥接联网
CentOS下vm虚拟机桥接联网 vm虚拟机下的桥接联网相当于虚拟机是一个独立的主机,直接与外网相连,这是比较好的连接方式,这样外网的机子就可以直接访问到虚拟机了. 首先虚拟机的联网方式设置为 ...
- http://www.roncoo.com/course/view/a09d8badbce04bd380f56034f8e68be0
http://www.roncoo.com/course/view/a09d8badbce04bd380f56034f8e68be0
- 读取Excel数据到Table表中
方法一: try { List<DBUtility.CommandInfo> list = new List<DBUtility.CommandInfo>(); string ...
- three.js运动
<!DOCTYPE html> <html> <head> <title>Example 01.04 - Materials, light and an ...