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