首页logo
  •  

jonllen

金龙,目前就职于一家软件公司,从事Java和.Net信息安全开发设计。

个人档案

jonllen
心情闪存 | 给他留言
妮称:jonllen
来自:中国. 湖南. 湘潭
简述:金龙,目前就职于一家软件公司,从事Java和.Net信息安全开发设计。
博客日历

关于IE6的老掉牙select问题

今天真的很'瞎'也,整整一个下午都没能解决一个问题,而且是一开始都没有明白需求,幸好做到半路上发现个问题问了下Earth,发现原来自己一直都没有明白要做什么?哎,悲哀!为什么我的沟通和理解能力这么差呢?怪不得现在还是一个人。。。其实是一个很小问题拉,算是css样式问题,在IE6里面select会覆盖遮挡在所有元素之上,现在有一个select,想要把它做成可选值又可手动输入值的,但是它又没有一个属性来标识可输入的功能,所有只能新加个text文本输入框,控制的实现和隐藏来模式实现这个功能,但是这个功能竟然搞了我一下午,白拿工资了。。。

要实现的效果如下:

fdExt 请选择

选择值:

代码如下:

<div class="select">
fdExt
<select id="drpName" name="drpName" onchange="eChoose(this.value)" >
<option value="">自己输入</option>
<option value="a">a项</option>
<option value="b">b项</option>
</select>
<input type="text" id="txtName" class="text" value="" />
<input type="button" id="btnSelect" class="btn" value="▼" />
<span class="mark" title="*">请选择</span>
</div>
<br />
<div class="select">选择值:<input type="text" id="txtChoose" class="text" value="" /></div>
<style type="text/css">
.select
{ position:relative; margin:0 auto; width:400px; border:solid 1px #ccc;height:22px;}
.select select
{width:196px;height:18px;position:absolute; top:1px;left:50px;visibility:hidden; z-index:9999; }/*position:absolute; top:1px;left:50px;*/
.select .text
{width:170px; height:15px; position:absolute;top:1px;left:50px;}
.select .btn
{ width:17px; height:17px;position:absolute;top:2px;left:226px;text-align:center; padding:0px;}
.select .mark
{ margin-left:200px;LINE-HEIGHT: 22px;color:red;}
</style>
<script type="text/javascript">
var eClick = function (e){
e
= window.event || e;
var targetElem = e.srcElement || e.target;
var selectElem = document.getElementById('drpName');
var txttElem = document.getElementById('txtName');
//如果是下拉按钮
if ( targetElem.id == 'btnSelect' ){
selectElem.style.visibility
= 'visible'; // collapse visible hidden
selectElem.focus();
//展开select项(默认IE会提示!)
//try{ var WshShell = new ActiveXObject("Wscript.Shell");WshShell.SendKeys("%{DOWN}");WshShell.Quit; } catch(e){ }
}else if( targetElem.id == 'drpName' ) {

}
else{
selectElem.style.visibility
= 'hidden';
}
};
addEvent(document,
'click',eClick);

function addEvent(target, eventType, func, parameter) {
var efunc = function (e){ func (e, parameter); };
if( target && target.attachEvent)
{
target.attachEvent(
"on" + eventType, efunc );

}
else if( target && target.addEventListener)
{
target.addEventListener(eventType, efunc,
false);

}
}

function eChoose(value)
{
document.getElementById(
'txtChoose').value = value;
var selectElem = document.getElementById('drpName');
selectElem.style.visibility
= 'hidden';
var txttElem = document.getElementById('txtName');
txttElem.value
= value;
if (value=='')
{
txttElem.disabled
= false;
txttElem.focus();
}
else
{
txttElem.disabled
= true;
document.getElementById(
'txtChoose').focus();
}
}
</script>

代码只是一个事件关联,select的显示和隐藏的控制,没什么好说,不过这里实现的效果还差矣!因为在点那个▼按纽只能显示select,却没办法展开select下拉列表项,所点了那个按纽还需要点开select一下再去选择,无语了,用户体验差!还有一个就是用IE专用的ActiveXObject可以控制展开select下拉列表项,不过好象默认提示Active运行的警报,而且隔段时间选的是又会提示,不好不好。话说回来,这个只是在IE6里面才有这样的问题,为什么不直接用层解决呢,把所有的select获取换成div层,即可设置为可输入或不可输入,好象Ext就有这样的控件了,这里留个记号,有时间也去写一个这样的服务器控件。

调整好样式后最终实现的效果如下:

名: 请选择
  • posted@ 2009-09-14 22:36
  • update@ 2010-02-11 15:17:06
  • 阅读(11801)
  • 评论(0)

相关文章

评论
暂无任何评论。
发表评论
*必填
回复通知我
*必填

博文推荐