雨夜带刀's Blog

Email Suggest 邮箱输入提示

<p>最近的项目会用到登录框邮箱输入提示的功能,于是花了点时间仿照新浪微博的登录框的邮箱提示效果自己写了一个,效果和新浪微博的基本一致,但是实现原理可能会有区别。</p>
<a href="http://stylechen.com/wp-content/uploads/demo/email-suggest/index.html" target="_blank">查看演示</a>
<h3>HTML结构部分:</h3>
<pre class="brush: c-sharp">
<div id="login_box">
  <div>
    <label for="email">电子邮箱:</label>
    <input type="text" id="email" autocomplete="off" />
  </div>
  <ul id="email_list">
    <li>请选择邮箱类型</li>
    <li></li>
    <li>@163.com</li>
    <li>@126.com</li>
    <li>@qq.com</li>
    <li>@yahoo.com.cn</li>
    <li>@gmail.com</li>
    <li>@sohu.com</li>
    <li>@hotmail.com</li>
  </ul>
</div>
</pre>
<p>与新浪微博不同的是,我将邮箱后缀都先写在了结构中,然后用把邮箱后缀取出来存到一个数组中。上面input标签中的autocomplete="off"属性是用来关闭浏览器默认的cookie提示的,如果不关闭这个提示将会弹出2个层,新浪微博的就没有关闭,这应该算是一个BUG吧。</p>

头像

雨夜带刀

前端开发工程师,技术宅,现居北京。

雨夜带刀的开源项目

easy.js
一个简洁的 JavaScript 类库,集成了模块加载器,同时也有包含了常见的的组件库,可访问项目网站
seed
符合 AMD 规范的 JavaScript 模块加载器。
ecope
从 easy.js 组件库中移值过来的基于 jQuery 的组件库,简单实用,API 风格统一。