zoukankan
html css js c++ java
一个输入框提示列表效果
http://bbs.blueidea.com/thread-2832075-1-1.html
<!
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=utf-8"
/>
<
title
>
输入框提示列表效果
</
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
"
;
break
;
}
}
function
getValue(obj,str)
{
var
input
=
window.document.getElementById(obj);
input.value
=
str;
}
</
script
>
</
head
>
<
body
>
<
div
class
="form"
>
<
div
>
Location:
<
input
type
="text"
id
="txt"
name
="txt"
onfocus
="showAndHide('List1','show');"
onblur
="showAndHide('List1','hide');"
></
div
>
<!--
列表1
-->
<
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"
onfocus
="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"
onfocus
="showAndHide('List3','show');"
onblur
="showAndHide('List3','hide');"
></
div
>
<!--
列表3
-->
<
div
class
="Menu"
id
="List3"
>
<
div
class
="Menu2"
>
<
ul
>
<
li
onmousedown
="getValue('txt3',this.innerText);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
>
输入框提示列表效果
Location:
中国CHINA
美国USA
Sex:
男Male
女Female
education:
大专
本科
硕士
本科
jQuery写的一个类似的:
http://www.huaxia4.com/jq/autofill.htm
查看全文
相关阅读:
机器语言 汇编语言 C C++ Java C# javaScript Go 编译型语言 解释型语言
计算机历史(二战前)
可维护性组件的编写原则
the lasted discuss about h5 optimize
The last discussion about the inherit
The last discussion about the prototype
font-size line-height vertual-align的复杂关系
vertical-align
retina屏 适配问题
XMLHttpRequest2.0的进步之处
原文地址:https://www.cnblogs.com/CB/p/1135661.html
最新文章
七层模型之传输层
七层模型中底下三层
从小程序看react
c语言 程序与系统关系 dark语言的演进
现代代码体系
操作系统总结
操作系统之死锁
图解tcp ip总结
操作系统学习之进程线程
计算机基础
热门文章
前端数据管理
数据工程师
ramda其他方法
npm与yarn
mysql索引
app内嵌H5的时候 所需要考虑的一些东西
中间层与中间件的区别
宇宙中如何传回图片
我理解的代码
多个script代码块执行问题(猜测)
Copyright © 2011-2022 走看看