js之搜索框
目标效果:点击搜索框,搜索框内提示信息消失,可输入搜索信息,点击搜索框外搜索框如果没提示信息或者为空时,显示搜索框提示信息,如果有搜索信息,显示搜索信息。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input class="i1" type="text" value="提示信息" onfocus="hide(this)" onblur="show(this)">
<style>
.i1{
color: gray;
}
</style>
<script type="text/javascript">
function hide(ths) { //隐藏提示信息,样式去掉
ths.value = '';
ths.className = '';
}
function show(ts) { //如果没输入任何内容或者搜索框空时,添加提示信息和样式
var cont = ts.value;
if (cont == '提示信息' || cont.trim().length == 0){
ts.value = '提示信息';
ts.className = 'i1';
};
}
</script>
</body>
</html>
js之搜索框的更多相关文章
- typecho博客组插件:openSug.js百度搜索框下拉提示免费代码
Typecho候选搜索增强插件:安装openSug插件即可获得带有“搜索框提示”功能的搜索框,让Typecho搜索更便捷! 支持百度.谷歌.雅虎.Yandex.360好搜.UC神马.酷狗.优酷.淘 ...
- 使用jsonp跨域调用百度js实现搜索框智能提示,并实现鼠标和键盘对弹出框里候选词的操作【附源码】
项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择.使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript ...
- 使用jsonp跨域调用百度js实现搜索框智能提示(转)
http://www.cnblogs.com/oppoic/p/baidu_auto_complete.html 项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好 ...
- js实现搜索框响应回车键
1.HTML页面, 注意:不要用使用form标签. Html代码 收藏代码<input type="text" name="keyword" id=&qu ...
- js的搜索框
第一种 单独一个form表单提交 <div class="hc-prm-search search flr"> <form action="/user ...
- 通过cookie实现搜索框内容保存关闭浏览器之前的操作、jq js实现方法
jq实现的方法: jq需要在页面中引入JQ.cookie插件 这是一个超轻量级插件 要实现的效果: 下面是jq代码: $(function(){ var til=$("#orderInfoC ...
- JS,JQ及时监听input值的变化,MUI的input搜索框里的清除按钮的点击监听事件
JS: document.getElementById("input对象的ID").addEventListener('input',function(){ console.log ...
- js实现百度搜索框滑动固定顶部
现在很多主流系统例如百度.有道.爱奇艺等的搜索框都有一个特点,滑动到刚好看不到搜索框时,固定搜索框到顶部,这也算是一个对用户友好型的操 作. 在看了百度的js和css后自己摸索出来实现效果,还是学艺不 ...
- JS实现选择菜单栏(配合慕课网淘宝搜索框的课程)
以下是关于实现慕课网淘宝搜索框的JS代码,不过只有选择菜单栏(其余比较容易实现). <!doctype html> <html> <head> <!--在IE ...
随机推荐
- delphi如何在form显示出来后处理指定的事件(例如自动登录)
最近写一个delphi客户端,遇到一个自动登录问题,已经解决了思路如下: 1.在Form的oncreate事件中读取用户配置文件,检查及处理是否保存了用户密码,是否自动登录,如果需要自动登录, 自动登 ...
- WPF触发器(Trigger) - DataTrigger
官方文档中对DataTrigger的介绍 Represents a trigger that applies property values or performs actions when the ...
- Request模块—数据解析工具
一.爬虫基本步骤 指定URL信息 发起请求 获取响应数据 对响应数据进行数据解析 持久化存储 二.数据解析 1. 正则表达式 (1) 基本语法 1. 单字符: . : 除换行以外所有字符 [] :[a ...
- jmeter获取cookies信息(配置)
jmeter发送请求后,响应信息里获取不到cookies(实际上会返回一个cookies),解决方法: 在jmeter.properties里找到CookieManager.save.cookies, ...
- jvm加载类的7个步骤
- 没有安装hiredis
在redis的发行包中的deps目录中就包含hiredis的源码,手动编译安装,或者自行下载一份.地址:hiredis的地址 cd /deps/hiredis make make install 然后 ...
- python国外博客推荐
http://michal.karzynski.pl/blog/2013/06/09/django-nginx-gunicorn-virtualenv-supervisor/ https://www. ...
- Python3自动化运维之Fabric模版详解
一.概要 Fabric是基于Python(2.7,3.4+以上版本)实现的SSH命令行工具,简化了SSH的应用程序部署及系统管理任务,它提供了系统基础的操作组件,可以实现本地或远程shell命令,包括 ...
- mysql 开发进阶篇系列 38 mysql日志之错误日志log-error
一.mysql日志概述 在mysql中,有4种不同的日志,分别是错误日志,二进制日志(binlog日志),查询日志,慢查询日志.这此日志记录着数据库在不同方面的踪迹(区别sql server里只有er ...
- [深度学习] 最全优化方法总结比较--SGD,Adagrad,Adadelta,Adam,Adamax,Nadam
SGD 此处的SGD指mini-batch gradient descent,关于batch gradient descent, stochastic gradient descent, 以及 min ...