专栏首页james大数据架构js单击输入框后弹出提示信息效果

js单击输入框后弹出提示信息效果

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网,站长必备js特效及广告代码。大量高质量js特效,提供高质量广告代码下载,尽在站长特效网" />
<title>单击输入框后给出提示效果,sky整理收集。</title>
<style type="text/css">
<!--
body{background:#fff}
.Menu {
 position:relative;
 width:204px;
 height:127px;
 z-index:1;
 background: #FFF;
 border:1px solid #000;
 margin-top:-100px;
 display:none;
}
.Menu2 {
 position: absolute;
 left:0;
 top:0;
 width:100%;
 height:auto;
 overflow:hidden;
 z-index:1;
}
.Menu2 ul{margin:0;padding:0}
.Menu2 ul li{width:100%;height:25px;line-height:25px;text-indent:15px;
             border-bottom:1px dashed #ccc;color:#666;cursor:pointer;
    change:expression(
     this.onmouseover=function(){
       this.style.background="#F2F5EF";
     },
     this.onmouseout=function(){
       this.style.background="";
     }
    )
   }
input{width:200px}
.form{width:200px;height:auto;}
.form div{position:relative;top:0;left:0;margin-bottom:5px}
#List1,#List2,#List3{left:0px;top:93px;}
-->
</style>
<script type="text/javascript">
  function showAndHide(obj,types){
    var Layer=window.document.getElementById(obj);
    switch(types){
   case "show":
     Layer.style.display="block";
   break;
   case "hide":
     Layer.style.display="none";
 }
  }//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
  function getValue(obj,str){
    var input=window.document.getElementById(obj);
 input.value=str;
  }
</script>
</head>
<body>
<a href="<#ZC_BLOG_HOST#>">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net,站长js特效。<hr>
<!--欢迎来到站长特效网,我们网站收集大量高质量js特效,提供许多广告代码下载,网址:www.zzjs.net,zzjs@msn.com,用.net打造靓站-->
<div class="form">
 <div> Location:<input type="text" id="txt" name="txt" onClick="showAndHide('List1','show');" onblur="showAndHide('List1','hide');"></div>
   <!--列表1-->
   <div class="Menu" id="List1">
   <div class="Menu2">
     <ul>
    <li onmousedown="getValue('txt','站长特效网');showAndHide('List1','hide');">站长特效网</li>
    <li onmousedown="getValue('txt','zzjs.net');showAndHide('List1','hide');">zzjs.net</li>
  </ul>
   </div>
   </div>
<div> Sex:<input type="text" id="txt2" name="txt2" onClick="showAndHide('List2','show');" onblur="showAndHide('List2','hide');"></div>
    <!--列表2-->
   <div class="Menu" id="List2">
   <div class="Menu2">
     <ul>
    <li onmousedown="getValue('txt2','男Male');showAndHide('List2','hide');">男Male</li>
    <li onmousedown="getValue('txt2','女Female');showAndHide('List2','hide');">女Female</li>
  </ul>
   </div>
   </div>
<div> education:<input type="text" id="txt3" name="txt3" onClick="showAndHide('List3','show');" onblur="showAndHide('List3','hide');"></div>
    <!--列表3-->
   <div class="Menu" id="List3">
   <div class="Menu2">
     <ul>
    <li onmousedown="getValue('txt3','大专');showAndHide('List3','hide');">大专</li>
    <li onmousedown="getValue('txt3','本科');showAndHide('List3','hide');">本科</li>
    <li onmousedown="getValue('txt3','硕士');showAndHide('List3','hide');">硕士</li>
    <li onmousedown="getValue('txt3','本科');showAndHide('List3','hide');">本科</li>
  </ul>
   </div>
   </div>
</div>
</body>
</html>

运行效果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS代码格式化和语法着色

    有时为了研究学习一些格式不规范的JS代码段,需要将代码段格式化一下,这样思路就会清晰多了,网上找到此款格式化的工具,将以下代码保存为html格式文件即可使用 <...

    欢醉
  • 网页超过一屏时自动浮动在网页最上方的图层特效

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>adsorpti...

    欢醉
  • Android中关于dip和px以及转换的总结

    我们在页面布局的时候,经常会设置容器的长度,但是到底该使用哪个作为长度的单位而懊恼。在Android中支持的描述大小区域的类型有以下几种: px(pixels)...

    欢醉
  • vuejs小例子之记事本

    绝命生
  • Vue框架Element UI教程-出现和隐藏动画(三)

    今天继续写组件的运用相关例子 点击按钮的时候,元素会呈现一个出现和隐藏的动画功能。

    王小婷
  • PC端CSS布局汇总

    此文章是 解剖CSS布局原理 的续集,之前那篇文章讲的都是理论,本文章讲具体的实例,根据自己对布局的理解与开发经验分为以下几类。

    前端博客 : alili.tech
  • 超详细教程:纯CSS3写一个摇头晃脑的小哥

    1.1作为一个刚刚打算要入行的准前端,并没有什么基础,暂时是按照网上的前辈们的指导,按部就班地学习中。首先就要学习CSS3的使用。前期,做过几个比较简单的网站首...

    前端博客 : alili.tech
  • 重排与重绘

    原文地址:http://www.cun-xu.cn/index.php/2018/12/25/重排与重绘/

    IMWeb前端团队
  • 比特币暴跌,矿难来临,美国一矿机巨头宣布破产

    最近,加密数字货币市场又是一片萧瑟狼藉,尤其是比特币的暴跌,已经开始引发后续蝴蝶效应,导致美国一家矿机巨头Giga Watt破产。

    镁客网
  • python 如何判断字典是否为空?

    py3study

扫码关注云+社区

领取腾讯云代金券