邮箱自动匹配下拉选项

来源：互联网发布：移动数据流量业务序号编辑：程序博客网时间：2024/05/21 17:35

效果图：

第一步：下载jquery插件 inputmail.js

第二步：在项目中引入inputmail.js

第三步：jsp页面

    <body>
       <h1 class="tit-h1">
           jquery输入框邮箱下拉提示层
       </h1>

       <div class="wrap">

           <script type="text/javascript">
   $(function() {
       $("#loginName").changeTips( {
           divTip : ".on_changes"
       });
   })
</script>

           <div class="login">
               <div class="ln">
                                            
                   <input type="text" maxlength="128" name="loginName" id="loginName"
                       placeholder="邮箱/会员帐号/手机号" />
               </div>
               <ul class="on_changes"
                   style="position: absolute; left: 78px; top: 42px">
                   <li email="">
                       请选择邮箱类型
                   </li>
                   <li email=""></li>
                   <li email="@sina.com"></li>
                   <li email="@163.com"></li>
                   <li email="@qq.com"></li>
                   <li email="@hotmail.com"></li>
                   <li email="@126.com"></li>
                   <li email="@gmail.com"></li>
                   <li email="@yahoo.com"></li>
               </ul>
           </div>

       </div>
       <br/>

       <div style="text-align: center; clear: both">
           <p>
               适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.
           </p>
           <p>
               来源：
               <a href="http://sc.chinaz.com/" target="_blank">站长素材</a>
           </p>
       </div>
   </body>

0 0