登陆框提醒文字/功能

最新推荐文章于 2025-04-25 16:47:55 发布

hjpking

最新推荐文章于 2025-04-25 16:47:55 发布

阅读量435

点赞数

文章标签： function autocomplete html input 新浪微博 class

本文链接：https://blog.youkuaiyun.com/hjpking/article/details/6654845

版权

本文分享了如何在登录框中添加类似新浪微博的提示文字功能，经过一天的探索，成功实现并提供相关代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于项目需要在登陆框上面添加提醒文字的功能，功能类似于新浪微博的。折腾了一天，总算是把他给弄出来了。下面贴出代码来：

欢迎访问我的博客

<html>
    <head>
        <title>登陆框 提醒功能</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style>
            /*下拉框*/
            .son_ul{background:#fff;width:200px;border:1px solid #ccc;padding:0 2px;position:absolute;left:70px;top:30px;color:#333;text-indent:5px; overflow:hidden;zoom:1;}
            .son_ul ul{padding:0;}
            .son_ul ul li{height:20px;line-height:20px;cursor:pointer;height:20px;line-height:20px; overflow:hidden;}
            .son_ul .hover{background:#efefef;}
            .server_list h2 em{margin-top:0;} 
        </style>
        <script type="text/javascript" src="http://f.game.tom.com/xbyxpt/js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript">
          //定义类
          var lLayer = {
              currentIndex:-1
          };
          //生成页面的HTML代码
          lLayer.geneList = function (prefix)
          {
              if (prefix == '' || prefix =='undefined') { prefix = ''; }
              var mailList = [
                  {'name':'tom',     'address': '@tom.com',     'index':'0'},
                  {'name':'163',     'address': '@163.com',     'index':'1' },
                  {'name':'sina',    'address': '@sina.com',    'index':'2'},
                  {'name':'qq',      'address': '@qq.com',      'index':'3'},
                  {'name':'126',     'address': '@126.com',     'index':'4'},
                  {'name':'hotmail', 'address': '@hotmail.com', 'index':'5'},
                  {'name':'gmail',   'address': '@gmail.com',   'index':'6'},
                  {'name':'suho',    'address': '@suho.com',    'index':'7'},
                  {'name':'yahoo',   'address': '@yahoo.com',   'index':'8'},
                  {'name':'139',     'address': '@139.com',     'index':'9'}
              ];
              var html = '';
              for (var i = 0; i < mailList.length; i++)
              {
                  if (i == 0)
                  {
                      html += '<li id="liid_'+mailList[i].index+'" syle="bgcolor:#999999">'+prefix+mailList[i].address+'</li>';
                  } else 
                  {
                      html += '<li id="liid_'+mailList[i].index+'">'+prefix+mailList[i].address+'</li>';
                  }
              }
              $('#ullists').html(html);
          }

          //输入字符信息，自动补全
          lLayer.setItem = function (value, event)
          {
              if (value == '' || value =='undefined') 
              {
                  lLayer.layerHide('loginLayers');
              }
              lLayer.geneList(value);
              lLayer.layerShow('loginLayers');
              lLayer.moveItems(event.keyCode);

              if (event.keyCode == 13)
              {
                  lLayer.selectItems();
              }
          }

          //移动方向键
          lLayer.moveItems = function (keyCode)
          {
              var liListNum = document.getElementById("ullists").getElementsByTagName("li").length;
              liListNum -= 1;

              if (keyCode == 38)
              {
                  if (lLayer.currentIndex == 0)
                  {
                      lLayer.currentIndex = liListNum;
                  } else 
                  {
                      lLayer.currentIndex -= 1;
                  }
                  document.getElementById('liid_'+lLayer.currentIndex).style.backgroundColor = "#999999"; 
              } else if (keyCode == 40)
              {
                  if (lLayer.currentIndex == liListNum)
                  {
                      lLayer.currentIndex = 0;
                  } else
                  {
                      lLayer.currentIndex += 1;
                  }
                  document.getElementById('liid_'+lLayer.currentIndex).style.backgroundColor = "#999999";
              }
          }

          //选择内容
          lLayer.selectItems = function ()
          {
              if (lLayer.currentIndex == -1)
              {
                  lLayer.currentIndex = 0;
              }
              var passport = $('#liid_'+lLayer.currentIndex).text();
              document.getElementById('tomid').value = passport;
              lLayer.layerHide('loginLayers');
              document.getElementById('tompwd').focus();
          }

          //浮层显示
          lLayer.layerShow = function (id)
          {
              return document.getElementById(id).style.display = 'block';
          }

          //浮层隐藏
          lLayer.layerHide = function (id)
          {
              return document.getElementById(id).style.display = 'none';
          }
          </script>
    </head>
    <body>
        用户名：<input type="text" name="tomid" id="tomid" class="inp" autocomplete="off" tabindex="1" onKeyUp="lLayer.setItem(this.value, event)"/>
        <div class="son_ul" id="loginLayers" style="display:none;">
        <strong>请选择账号类型</strong>
        <ul id="ullists"> </ul>
        </div>
        <br />
        密   码：<input type="password" id="tompwd" name="tompwd"/>
    </body>
</html>