三零网 www.q3060.com -- 技术、分享、进步
当前位置: > 网络编程 > CSS/HTML > html5实例:CSS+JS仿类似新浪微博搜索框的特效的表单表格代码

html5实例:CSS+JS仿类似新浪微博搜索框的特效的表单表格代码

投稿:mmqxmq2p  发布时间:2018-02-01  【手机版】  人气:

导读:三零(q3060.com)小编琪琪接下来为你介绍一下关于表单表格的技巧,希望对您有帮助。那么下面我们一起看看,具体内容所述如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <title>CSS+JS仿类似新浪微博搜索框的效果</title>
 <style type="text/css">
 * { padding:0; margin:0;}
 body { font-size:14px; }
 #box { width:600px; margin:40px auto;}
 #in { width:240px; height:24px; line-height:24px; border:1px solid #369; border-radius:4px; box-shadow:inset 0 0 2px #999; }
 #suggest { display:none; position:relative; margin-top:-1px; width:240px; padding-top:1px; border:1px solid #369; border-top:0 none;
        border-radius:4px; box-shadow:inset 0 0 2px #999; overflow:hidden; }
 #suggest a { display:block; color:#f00; height:24px; line-height:24px; text-decoration:none; padding:0 4px;}
 #suggest a:hover { background:#eee;}
 #suggest a span { color#369;}
  </style>
  <script type="text/javascript">
 window.onload=function(){
 //声明一坨变量供下面使用
 var obox=document.getElementById("box");
 obj=document.getElementById("in");
 osug=document.getElementById("suggest");
 oa=osug.getElementsByTagName("span");
      //兼容ie和火狐浏览器的方式,但是经测试发现ie678可以ie9却不行在删除的时候无法触发,网上查下说有ie9这个问题
 obj.oninput=obj.onpropertychange=onchange;
 function onchange(){
  var txt=this.value;
  var words=txt.length;
  if(words==0){
   osug.style.display="none";
  }else if(words<=8){
   osug.style.display="block";
   for( var i=0;len=oa.length,i<len;i++){
    oa[i].innerHTML=txt;
   }
  }else if(words>8){
   osug.style.display="block";
   var limit=txt.substring(0,8)+"...";
   for( var i=0;len=oa.length,i<len;i++){
    oa[i].innerHTML=limit;
   }
  }
 }
 
}
function disbox(){
   document.getElementById("suggest").style.display="none";
  }
</script>
</head>
<body>
 <dl id="box">
  <dt><input onblur="disbox()" type="text" name="" id="in" /></dt>
  <dd id="suggest" >
        <a href="###">搜“<span></span>”相关微博</a>
        <a href="###">搜“<span></span>”相关用户</a>
  </dd>
 </dl>
</body>
</html>

<br>在输入框中输入文字查看预览效果<br><hr> 收集于互联网,只为兴趣与学习交流,不作商业用途。</font></p>

结语:以上就是分享给大家的表单表格内容了,希望大家多多支持三零网站。更多知识点,可以能过本站网页顶端的搜索或进入相关专题,如果有任何疑问都可以一起留言交流。

●【往下看,下一页更精彩】●
1  2  3  下一页 
延伸阅读:
·html5实例:推荐CSS高仿Excel表格功能的表单表格代码
·html5实例:CSS+JS拖拽图片上传添加附件效果的表单表格代码
·html5实例:JS+CSS打造实用的单击输入框弹出选择框特效的表单表格代码
  
温馨提示:以上内容整理于网络,仅供参考,如果对您有帮助,请收藏本网站!
大家感兴趣的内容
最新的内容
热门搜索
三零网 | 网站地图 | 最近更新 | 八千壁纸 | 512素材 | 最近更新 | 关于我们 | 联系方式 | |

Copyright © 2012-2020,Q3060.COM All Rights Reserved.