编程 Javascript

JS+CSS实现仿新浪微博搜索框的方法

Posted in Javascript onFebruary 24, 2015

本文实例讲述了JS+CSS实现仿新浪微博搜索框的方法。分享给大家供大家参考。具体实现方法如下：

<!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>JS+CSS仿类似新浪微博搜索框的效果</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>

希望本文所述对大家的javascript程序设计有所帮助。

JS+CSS实现仿新浪微博搜索框的方法

- Author -

代码家园

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js 动态文字滚动的例子

Jan 17 Javascript

JS修改css样式style浅谈

May 06 Javascript

jQuery中获取Radio元素值的方法

Jul 02 Javascript

JS实现5秒钟自动封锁div层的方法

Feb 20 Javascript

简述JavaScript的正则表达式中test()方法的使用

Jun 16 Javascript

javascript从作用域链谈闭包

Jul 29 Javascript

Javascript的表单验证-提交表单

Mar 18 Javascript

AngularJS指令中的绑定策略实例分析

Dec 14 Javascript

element-ui表格列金额显示两位小数的方法

Aug 24 Javascript

使用jQuery给Table动态增加行、清空table的方法

Sep 05 jQuery

Nuxt 项目性能优化调研分析

Nov 07 Javascript

vue-cil之axios的二次封装与proxy反向代理使用说明

Apr 07 Vue.js

JS实现让访问者自助选择网页文字颜色的方法

Feb 24 #Javascript

JS给超链接加确认对话框的方法

Feb 24 #Javascript

javascript实现图片循环渐显播放的方法

Feb 24 #Javascript

javascript感应鼠标图片透明度显示的方法

Feb 24 #Javascript

javascript文本框内输入文字倒计数的方法

Feb 24 #Javascript

jQuery实现感应鼠标动画效果自动伸长的输入框实例

Feb 24 #Javascript

JS实现超过长度限制后自动跳转下一款文本框的方法

Feb 23 #Javascript

You might like

PHP截取中文字符串的问题

2006/07/12 PHP

如何对PHP程序中的常见漏洞进行攻击

2006/10/09 PHP

PHP编程基本语法快速入门手册

2016/01/07 PHP

CodeIgniter配置之database.php用法实例分析

2016/01/20 PHP

CI框架简单邮件发送类实例

2016/05/18 PHP

php加密之discuz内容经典加密方式实例详解

2017/02/04 PHP

ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例

2018/06/13 PHP

脚本收藏iframe

2006/07/21 Javascript

各种常用浏览器getBoundingClientRect的解析

2009/05/21 Javascript

javascript中强制执行toString()具体实现

2013/04/27 Javascript

基于vue2.0实现简单轮播图

2017/11/27 Javascript

vue-router相关基础知识及工作原理

2018/03/16 Javascript

原生js实现form表单序列化的方法

2018/08/02 Javascript

详解React之key的使用和实践

2018/09/29 Javascript

layui 上传文件_批量导入数据UI的方法

2019/09/23 Javascript

LayUi数据表格自定义赋值方式

2019/10/26 Javascript

Python的Flask站点中集成xhEditor文本编辑器的教程

2016/06/13 Python

Python中 Lambda表达式全面解析

2016/11/28 Python

Python 实现随机数详解及实例代码

2017/04/15 Python

Python实现字符串中某个字母的替代功能

2019/10/21 Python

基于python及pytorch中乘法的使用详解

2019/12/27 Python

Python tkinter和exe打包的方法

2020/02/05 Python

浅谈tensorflow使用张量时的一些注意点tf.concat,tf.reshape,tf.stack

2020/06/23 Python

PyChon中关于Jekins的详细安装(推荐)

2020/12/28 Python

css3制作动态进度条以及附加jQuery百分比数字显示

2012/12/13 HTML / CSS

支票、地址标签、包装纸和慰问卡：Current Catalog

2018/01/30 全球购物

英国在线电子和小工具商店：TecoBuy

2018/10/06 全球购物

大学生实习证明范本

2014/01/15 职场文书

面试后感谢信

2014/02/01 职场文书

不忘国耻振兴中华演讲稿

2014/05/14 职场文书

优秀少先队辅导员先进事迹材料

2014/05/18 职场文书

党员教师群众路线思想汇报范文

2014/10/28 职场文书

小学教师岗位职责

2015/04/02 职场文书

教师培训学习心得体会

2016/01/21 职场文书

浅谈MySQL之浅入深出页原理

2021/06/23 MySQL

MySQL 条件查询的常用操作

2022/04/28 MySQL