<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>输入Email相关字符自动提示Email地址</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
body
{
margin:0px;
padding:0px;
font-family:Arial;
font-size:12px;
padding:10px;
}
</style>
</head>
<body>
Email <input id="me" type="text" value="" style="width:150px; height:18px; line-height:18px; border:1px solid #999;">
<script type="text/javascript">
var can1press = false;
$(function(){
$("#me").focus(function(){ //文本框获得焦点,插入Email提示层
$("#myemail").remove();
$(this).after("<div id='myemail' style='width:170px; height:auto; background:#fff; color:#6B6B6B; position:absolute; left:"+$(this).get(0).offsetLeft+"px; top:"+($(this).get(0).offsetTop+$(this).height()+2)+"px; border:1px solid #ccc;z-index:5px; '></div>");
if($("#me").html()){
$("#myemail").css("display","block");
$(".newemail").css("width",$("#myemail").width());
can1press = true;
} else {
$("#myemail").css("display","none");
can1press = false;
}
}).keyup(function(){ //文本框输入文字时,显示Email提示层和常用Email
var press = $("#me").val();
if (press!="" || press!=null){
var emailtxt = "";
var emailvar = ["用户名","部门名称","真实姓名"];
for(var i=0; i<emailvar.length; i++) {
emailtxt = emailtxt + "<div class='newemail' onclick='getT("+ i +")' style='width:170px; color:#6B6B6B; overflow:hidden;'><span color='#D33022'>" + press + "</span>" + emailvar[i] + "</div>"
}
$("#myemail").html(emailtxt);
if($("#myemail").html()){
$("#myemail").css("display","block");
$(".newemail").css("width",$("#myemail").width());
can1press = true;
} else {
$("#myemail").css("display","none");
can1press = false;
}
//beforepress = press;
}
if (press=="" || press==null){
$("#myemail").html("");
$("#myemail").css("display","none");
}
})
$(document).click(function(){ //文本框失焦时删除层
if(can1press){
$("#myemail").remove();
can1press = false;
if($("#me").focus()){
can1press = false;
}
}
})
})
function getT(obj) {
console.log(855);
console.log(obj);
}
</script>
</body>
</html>

仿造email后缀搜索功能(2)的更多相关文章

  1. 仿造email后缀自动添加功能(1)

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. Postgres全文搜索功能

    当构建一个Web应用时,经常被要求加上搜索功能.其实有时候我们也不知道我要搜索个啥,反正就是要有这个功能.搜索确实很重要的特性,这也是为什么像Elasticsearch和Solr这样基于Lucene的 ...

  3. 【Lucene3.6.2入门系列】第03节_简述Lucene中常见的搜索功能

    package com.jadyer.lucene; import java.io.File; import java.io.IOException; import java.text.SimpleD ...

  4. 第三百六十九节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索功能

    第三百六十九节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索功能 Django实现搜索功能 1.在Django配置搜索结果页的路由映 ...

  5. ElasticSearch(五):简单的ElasticSearch搜索功能

    这里主要是一些简单的ElasticSearch的搜索功能,复杂的搜索,比如过滤,聚合等以后单独在写 1. 搜索全部 GET book/_search 直接搜索全部,下面是对搜索结果的详细介绍:默认情况 ...

  6. 四十八 Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索功能

    Django实现搜索功能 1.在Django配置搜索结果页的路由映射 """pachong URL Configuration The `urlpatterns` lis ...

  7. (转)淘淘商城系列——商品搜索功能Service实现

    http://blog.csdn.net/column/details/15737.html 首先我们在taotao-search-interface工程中新建一个SearchService接口,并在 ...

  8. Android搜索功能的案例,本地保存搜索历史记录......

    开发的APP有一个搜索功能,并且需要显示搜索的历史记录,我闲暇之余帮她开发了这个功能,现把该页面抽取成一个demo分享给大家. 实现效果如图所示:  本案例实现起来很简单,所以可以直接拿来嵌入项目中使 ...

  9. Yii 1开发日记 -- 搜索功能及Checkbox的实现

    用yii 1实现后台的搜索功能,效果如下图: 1.模型中: public function search() { $criteria = new CDbCriteria; //独立高级搜索 if(is ...

随机推荐

  1. python调用系统命令的方法

    1.os模块 (1)system()方法 这个方法是直接调用标准C的system() 函数,在一个子终端运行系统命令 (2)poen()方法 这个方法执行命令后通过一个管道文件将结果返回 3.subp ...

  2. 如何用 putty 连接远程 Linux 系统

    如何用 putty 连接远程 Linux 系统 Putty 简介 Putty 是一个免费的.Windows x86 平台下的 Telnet.SSH 和 Rlogin 客户端,但是功能丝毫不逊色于商业的 ...

  3. 內部作业 OH01 0001710000 无价格可确定

    在CO15报工时,提示:“內部作業 OH01 0001710000 無價格可確定” 出现以上错误信息,表示没有在KP26维护价格, 只需要进入KP26维护成本中心和作业类型的价格即可, 具体操作如下图 ...

  4. <li>元素的排序

    要点: getElementsByTagName("li")返回的是HTMLCollection对象,这个对象不同于Array对象,不能使用sort()方法进行排序~ 下面方法的要 ...

  5. ubuntu安装软件失败,出现404错误,更新软件源

    更新源方法 备份原来的源 首先备份原来的源,用来出错后进行恢复 sudo cp /etc/apt/sources.list/etc/apt/sources.list_backup 1 如果更新源后出错 ...

  6. 应用安全 - 工具 - Jmeter - 漏洞 - 汇总

    CVE-2018-1297 Date 类型 rmi 反序列化导致远程代码执行 影响范围

  7. 应用安全 - 工具|平台 - CDN - 使用|命令 - 汇总

    简介 用途 使用缓存适应高并发请求 功能 ()抗DDOS ()隐藏真实IP 全球DNS地址分布:http://www.ab173.com/dns/dns_world.php全球IP地址段分布:http ...

  8. 【VS开发】【电子电路技术】PCI与PCIE主板插卡与插槽识别

    一.PCI PCI接口分为32bit和64bit两种,32bit就是一般台式机使用的普通的pci接口(图一.图三),64bit接口比32bit接口长一些一般只出现在服务器上(图四.图五).32bit和 ...

  9. 【Linux开发】linux设备驱动归纳总结(五):2.操作硬件——IO内存

    linux设备驱动归纳总结(五):2.操作硬件--IO内存 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ...

  10. 介绍 5 个实用的 Ajax 库

    参考链接:https://cuiqingcai.com/6806.html?utm_medium=hao.caibaojian.com&utm_source=hao.caibaojian.co ...