input+select输入汉字或拼音快速选择数据第7步 完结
第6步里剩下的两个问题,现在全部解决了,拼音的解决见:http://www.nnllok.cn/Read.aspx?id=474
这里简单说一下第2个问题的解决:
2.还是select的选择问题,如果只是单击鼠标选择一项,没问题,就是,如果想要用鼠标拉着select的滚动条往后浏览数据后再选择,鼠标只要一点到select,我就默认选择第一项了。。。我不知道怎么判断鼠标点在选项上还是点在滚动条上,如果我在最开始不设置默认选项,这里可以利用selectedIndex属性吗?
我没有取鼠标点在select控件的哪里,我取不到,所以我用了一个数组wordLastSelectValue记录每一个input控件对应的select会显示的最后value值
在phonics.js里,每一次设置了wordValueArray[nowInputIndex].value的值后,我就把这个值同时设置给wordLastSelectValue[nowInputIndex]
在SetInputValue方法里,判断改为下面的
if(wordSelectObj.selectedIndex != -1 && wordSelectObj.value != wordLastSelectValue[nowInputIndex])
就是,如果存在选中项,然后呢,这个选中项的值,和原来的选中项的值是一样子的,就说明当前的select是点击在滚动条上的,是不需要设置input的值,也不需要隐藏控件的
还有就是,我修改了这个控件的SetOption方法,本来在input的值为""时,我是不显示select的任何项的,现在我改为当input值为""时,显示所有项,这样子用户可以直接从select里选择,不一定必须录入才可以选择,操作会更方便
这个控件到这里结束。。。
我想过用input + div模拟,想一下,觉的借select会更方便,就是,如果是用input + div模拟,各种效果都会更漂亮。。。
---------------------------------------
16:51 2010/12/7
phonics.js的ShowSelect方法,显示div时,top值需要加上滚动条的高度:
function ShowSelect(obj)
{
//取当前input座标
var oRect = obj.getBoundingClientRect();
var x, y, scrollTop;
x = oRect.left;
y = oRect.top + 24;
scrollTop = document.body.scrollTop;
//重置select座标
wordSelectDivObj.style.left = x + "px";
wordSelectDivObj.style.top = eval(y + scrollTop) + "px";
//重置选项
SetOption(obj.value);
//显示select
if(wordSelectDivObj.style.display == "none") wordSelectDivObj.style.display = "block";
}