JavaScript智能填写续写版（QQ邮箱地址栏简化版）

前阵子用QQ邮箱发了几封邮件，发现其中的输入地址栏很别致，看了下，做的很精细，用户体验也灰常的不错。就拿过来做了下实验。但是代码量还是大了点，而且我一直强调的适用性与通用性的抉择上我又要纠结了。昨天遇到一个问题，就是在一个文本框里输入一堆人的姓名，这些姓名已经存在数据库中了，大家也知道，客户永远都是希望能少付出点，多回报点的，基于这个情况我打算把QQ邮箱的借过来用，可是问题出现了，剥离他的功能不难，但是剥离完之后（因为很多地方的实现不是那么的一直，比如我就不需要邮箱检验等）发现太庞大了，而且也不是那么的适用于我的一个小功能上，因此就自己重新写了一个很小很小的简化版。虽然说花费的精力不大，但是却让客户很happy，何乐而不为呢。

由于csdn博客系统的原因，这段代码中会出现textStrtextStr的字样，请替换成textStr。有两处。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  <title>智能填写</title>  <style type="text/css" >          #multiinput {  font-size:22px;  border:1px #000 solid;  font-weight:700;  }  #newInput {  height:24px;  font-size:22px;  border:none;  }  #selection ul {  margin:0;  padding:0;  border:1px solid #000;  width:75px;  border-top:0;  }  #selection li {  list-style:none;  margin:0;  padding:0;  height:24px;  cursor:pointer;  width:75px;  }  #multiinput a:hover  {  background-color:#eee;  cursor:text;  }  li.selected {  background-color:#eee;  }  </style>  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  <script type="text/javascript"><!--  var str = ['张学友','张信哲','刘德华','孙燕姿','周杰伦','张含韵','许飞','许巍','张宇','周星驰','唐朝乐队','迪克牛仔','郑伊健','陈小春','汪峰'];  $(function(){  //输入框获得焦点时  $("#newInput").focus(function(){  var textStr = ["<ul>"];  for(var i = 0; i < str.length; i++){  textStr.push('<li>' + str[i] + '</li>');  }  textStr.push("</ul>");  textStr = textStr.join('');  $("#selection").show().empty().append(textStr);  })  //输入框失去焦点时  .blur(function(e){  $("#selection").hide();  })  //按键按下时  .keydown(function(e){  if(e.keyCode == 8 && $(this).val().length == 0) {  $(this).prev().remove();  } else if(e.keyCode == 40) {  move(true);  }   else if(e.keyCode == 38) {  move(false);  } else if(e.keyCode == 13) {  $('<a>' + $('.selected').text() + ';</a>').insertBefore('#newInput');  $('#newInput').val('').focus();  }  })  //按键弹出时，进行搜索匹配。  .keyup(function(e){  if(e.keyCode == 40 || e.keyCode == 8 || e.keyCode == 38)  return;  var textStr = $(this).val();  var reg = new RegExp('(?=[^@]+)[^@]*' + textStr + '[^@]*(?=@|$)','g');  var arr = str.join("@").match(reg) || [];  textStr = ['<ul>'];  for(var i = 0; i < arr.length; i++) {  textStr.push('<li>' + arr[i] + '</li>');  }  textStr.push('</ul>');  textStr = textStr.join('');  $("#selection").empty().show().append(textStr);  });  //li的背景效果  $("#selection li").live("mouseover",function(){  $(this).siblings().removeClass('selected').end().addClass('selected');  })  //li的选中事件  .live("mousedown",function(){  $('<a>' + $(this).text() + ';</a>').insertBefore("#newInput");  $("#newInput").val('').focus();   });  $("#multiinput a").live('dblclick',function(){  $(this).remove();  });  });  function move(down) {  var selected = $('.selected');  if(down) {  if(selected.length == 0) {  $('#selection li:first').addClass('selected');  } else {  selected.removeClass('selected').next().addClass('selected');  }  } else {  if(selected.length == 0) {  $('#selection li:last').addClass('selected');  } else  {  selected.removeClass('selected').prev().addClass('selected');  }  }  }  // --></script>  </head>  <body>  <div id="multiinput">  <a id="t"></a><input id="newInput" type="text" autocomplete="off"/>  </div>  <div>  <div id="selection">  </div>  </div>  </body>
</html>

这次由于机器的原因，我没有测试多个浏览器的问题，甚至连一些小BUG也没测试，发出来只是给大家一个参考，同时希望有兴趣的童鞋来改进下，如果对QQ邮箱本身的强大功能有兴趣的可以去看看，绝非是这这个这么简单。里面很多机制足以你们去想破脑袋的。作为一个开发者，在用好玩的东西的时候，你是否想过是怎么实现的呢。

JavaScript智能填写续写版（QQ邮箱地址栏简化版）相关推荐

手机版qq邮箱一直连接服务器失败,iphone邮箱怎么连接服务器 iphone邮箱无法连接服务器怎么办...
随着现在手机的使用频率越来越高,它不仅对我们学习以及娱乐非常重要,工作方面也有很大好处,比如手机的邮箱功能便是如此.通过手机邮箱,我们不仅联络亲朋好友非常方便,处理工作的事情也是相当便利,它还可以帮助 ...
苹果邮件怎么添加qq邮箱_科技资讯:QQ邮箱格式怎么填写
最近关于QQ邮箱格式怎么填写在网上的热度是非常高的,很多网友们也都是非常关注QQ邮箱格式怎么填写这个事情,为此小编也是在网上进行了一番搜索查阅相关的信息,那么如果说有感兴趣的网友们想知道具体的情况的话 ...
手机版网易邮箱大师中添加qq邮箱时，一直卡在验证密保的界面怎么办
#问题描述:手机版网易邮箱大师中添加qq邮箱时,一直卡在验证密保的界面怎么办解决办法: 打开网页版QQ邮箱,点击设置,选择账户下滑翻到POP3/IMAP/SMTP/Exchange/CardDAV ...
仿qq邮箱源码程序_巧用小程序·云开发实现邮件发送功能丨实战
先看效果图: 通过上面的日志,可以看出我们是158开头的邮箱给250开头的邮箱发送邮件,下面是成功接收到的邮件. 准备工作 1.qq邮箱一个 2.开通你的qq邮箱的授权码(会具体讲解) 3.注册自己的 ...
qq邮箱如何在win10邮箱连接到服务器,win10自带邮箱如何使用？win10自带邮箱如何同步qq邮箱邮件？...
win10自带邮箱如何使用? 相信很多小伙伴在登录win10自带的邮箱登录QQ邮箱时,显示同步失败或者登录超时,但又找不到相关的资料,下面是我自己邮箱的操作流程,小伙伴可以尝试一下,有什么问题留言即可 ...
Mac邮件客户端怎么添加QQ邮箱
Mac邮件客户端怎么添加QQ邮箱?在mac电脑中,默认是没有qq邮箱的,如果需要使用QQ邮箱就需要我们手动添加一下.那么该如何在MAC OS添加QQ邮箱呢?以下文章就告诉你mac电脑添加qq邮箱的方法 ...
python脚本实现qq邮箱发送邮件
直接调用python自带得smtplib 库和 email 库就能实现邮件的发送 qq邮箱发送邮件需要在qq邮箱中设置开启qq邮箱授权码进入网页版qq邮箱,点击设置,找到账户设置下拉到最下面生成 ...
关于gmail绑定qq邮箱的问题
此次 Gmail 更新,不仅带来了 Material Design 化的全新界面,还将原本独立的 Exchange 和邮件服务整合其中.也就是说,除了 Google 自家的邮箱服务, 我们还可以使用 ...
手机qq如何绑定qq邮箱服务器,iphone怎么绑定qq邮箱
以下解答是其他网友解答的,我操作后解决了问题,我的问题和你相同,一年多了, 现分享给大家: 登陆你的网页QQ邮箱,在邮箱设置里选择账号,启用你的邮箱IMAP和POP功能,查看你的邮箱发件昵称,记住这个 ...

JavaScript智能填写续写版（QQ邮箱地址栏简化版）

JavaScript智能填写续写版（QQ邮箱地址栏简化版）相关推荐

最新文章

热门文章