javascript 输入框提示列表效果

2023-04-22 原文

代码可以更简洁些，有更简便的方法欢迎贡献出来啊。

<title>输入框提示列表效果_Devmax</title>
<style type="text/css">  </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";     }   }   function getValue(obj,str){     var input=window.document.getElementById(obj);     input.value=str;   } </script><div class="form">  <div> Location：<input type="text" id="txt" name="txt" onclick="showAndHide('List1','show');" onblur="showAndHide('List1','hide');">
</div>        <div class="Menu" id="List1">       <div class="Menu2">         <ul>
<li onmousedown="getValue('txt','中国CHINA');showAndHide('List1','hide');">中国CHINA</li>           <li onmousedown="getValue('txt','美国USA');showAndHide('List1','hide');">美国USA</li>         </ul>
</div>    </div> <div> Sex：<input type="text" id="txt2" name="txt2" onclick="showAndHide('List2','show');" onblur="showAndHide('List2','hide');">
</div>         <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>         <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>

[Ctrl A 全选注:引入外部Js需再刷新一下页面才能执行]

javascript 输入框提示列表效果的更多相关文章

html5 拖拽及用 js 实现拖拽功能的示例代码

这篇文章主要介绍了html5 拖拽及用 js 实现拖拽,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
详解通过focusout事件解决IOS键盘收起时界面不归位的问题

这篇文章主要介绍了详解通过focusout事件解决IOS键盘收起时界面不归位的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
HTML5去掉输入框type为number时的上下箭头的实现方法

这篇文章主要介绍了HTML5去掉输入框type为number时的上下箭头的实现方法,需要的朋友可以参考下
amaze ui 的使用详细教程

这篇文章主要介绍了amaze ui 的使用详细教程,本文通过多种方法给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
HTML5中input输入框默认提示文字向左向右移动的示例代码

这篇文章主要介绍了HTML5中input输入框默认提示文字向左向右移动，本文通过实例代码给大家介绍的非常详细对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
详解移动端HTML5页面端去掉input输入框的白色背景和边框（兼容Android和ios）

本篇文章主要介绍了移动端HTML5页面端去掉input输入框的白色背景和边框，非常具有实用价值，需要的朋友可以参考下。
The Swift Code之UITextField的使用,及事件委托

id=98
swift皮筋弹动发射飞机ios源码

这是一个款采用swift实现的皮筋弹动发射飞机游戏源码，游戏源码比较详细，大家可以研究学习一下吧。
Swift开发教程--UITextField输入框如何隐藏软键盘

对于UITextField如何隐藏输入框，一直是初学者常遇到的问题。在View试图中，点击选中UITextField控件，为其添加DidEndOnExit实践。在弹出软键盘之后，点击return就可以隐藏软键盘了。
swift实现ios类似微信输入框跟随键盘弹出的效果

http://www.jianshu.com/p/4e755fe09df7

随机推荐

js中‘!.’是什么意思
Vue如何指定不编译的文件夹和favicon.ico

这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
基于JavaScript编写一个图片转PDF转换器

本文为大家介绍了一个简单的 JavaScript 项目，可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片，只需点击一下即可将其转换为 PDF 文件，感兴趣的可以动手尝试一下
jquery点赞功能实现代码点个赞吧!

点赞功能很多地方都会出现，如何实现爱心点赞功能，这篇文章主要为大家详细介绍了jquery点赞功能实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
AngularJs上传前预览图片的实例代码

使用AngularJs进行开发，在项目中，经常会遇到上传图片后，需在一旁预览图片内容，怎么实现这样的功能呢？今天小编给大家分享AugularJs上传前预览图片的实现代码，需要的朋友参考下吧
JavaScript面向对象编程入门教程

这篇文章主要介绍了JavaScript面向对象编程的相关概念，例如类、对象、属性、方法等面向对象的术语，并以实例讲解各种术语的使用，非常好的一篇面向对象入门教程,其它语言也可以参考哦
jQuery中的通配符选择器使用总结

通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下
javascript 动态调整图片尺寸实现代码

在自己的网站上更新文章时一个比较常见的问题是：文章插图太宽，使整个网页都变形了。如果对每个插图都先进行缩放再插入的话，太麻烦了。
jquery ajaxfileupload异步上传插件

这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
React学习之受控组件与数据共享实例分析

这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下