点击input弹出层的问题，就100分了！

李尸尸 2013-12-18 03:31:53

点击input，弹出层，层内有很多列表，点击列表将数值传入到input中，满意者80%的分，不能让别人白来一趟吧，都有分的

...全文

112 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

张运领 2013-12-18

打赏
举报

<title></title>
<style type="text/css">
#zylChooserColor{width:200px;border:2px solid #000;margin:1px;border-radius:2px;box-shadow:1px 1px 1px #aaa;position:absolute;background:#FFF;}#zylChooserColor p{padding:5px 10px;border-bottom:1px solid grey;margin-bottom:5px;}#zylChooserColor .creatU{list-style-type:none;padding:5px 10px;overflow:hidden;zoom:1;}#zylChooserColor .creatL{cursor:pointer;float:left;display:inline;margin:2px;width:32px;height:32px;}#zylChooserColor .creatS{position: relative;left: 50px;top: -5px;cursor: pointer;display: inline-block;}
</style>
</head>
<body>
<input type = "text" id = "aa"><input type = "button" value = "click" id = "bb"/>
<div id="zylChooserColor">
	<ul class="creatU">
		<li class="creatL" style="background-color: blue;" tar="blue"></li>
		<li class="creatL" style="background-color: green;" tar="green"></li>
		<li class="creatL" style="background-color: red;" tar="red"></li>
		<li class="creatL" style="background-color: yellow;" tar="yellow"></li>
		<li class="creatL" style="background-color: grey;" tar="grey"></li>
	</ul>
</div>
</body>
<script type="text/javascript">
document.getElementById("bb").onclick = function(){
	document.getElementById("zylChooserColor").style.display = "block";
}
document.getElementById("zylChooserColor").onclick = function(event){
	event = event || window.event;
	var target = event.srcElement || event.target,
	    tagName = target.tagName.toLowerCase(),
		result= "";
	if(tagName == "li"){
		result = target.getAttribute("tar");
		preventDefault(event);
		document.getElementById("aa").value = result;
		document.getElementById("zylChooserColor").style.display = "none";
	}
};

function preventDefault(e){
	//取消事件
	if(e.preventDefault){
		e.preventDefault();
	}else{
	//IE
		e.returnValue = false;
	}
}
</script>
</html>

试试，可以按需求，继续做修改的，我这里写的最简单的写法。