HTML可输可选下拉框实现的JavaScript脚本
代码
HTML可输可选下拉框实现的JavaScript脚本
关键字: javascript html可输可选下拉框
在写页⾯时，我们有时会有这样的需求，要下拉框可选可输⼊，该脚本就是可输可选控件.该脚本是根据⽹上某⼤侠源脚本改编⽽成，现记录在此，以备后⽤.
源码引⾃：blog.csdn/cxzhq2002
新增功能：⽀持模糊定位、⽀持上下箭选择、⽀持注释层功能、⽀持按回车键从下拉框中选择选项
效果图如下所⽰:
Js代码
//下拉框选项所对应的层的名字
var SELECT_DIV="SELECT_DIV_";
//注释层的名字
var NODE_DIV="NODE_DIV_";
var textObject;
//焦点是否在选择层上：初始时为false，表⽰默认不在选择层上
//主要防⽌⿏标点击选择项时，⽂本框会失去焦点，这样选择层就会跟着隐藏，此时还未
//让点击的选择项选中并赋值到⽂本框中去。此时可以设置⿏标在选择层上时cursorInSelectDivObj=ture
//这时点击时不会⽴即隐藏选择层，等选中后再设置cursorInSelectDivObj=false，此时就可以隐藏选择层了
var cursorInSelectDivObj=false;
//是否是ie浏览器
var ie=(ElementById && document.all);
//全局的注释数组
var noteArr = new Array();
//以防名字已存在，循环取名，先判断是否存在"Textselectshow_Div"的对象，
//如果存在，则重新取名为"Textselectshow_Div1"，如果"Textselectshow_Div1"
//还是存在，则取名为"Textselectshow_Div2"，依次类推:""
for(var i=ElementById(SELECT_DIV)!=null;i++){
var tmpNm = SELECT_DIV + i;
//如果存在同名的，则以重新取名为 Textselectshow_Div + i ，如果Textselectshow_Div + i
//存在，则循环取名为 Textselectshow_Div + i + 1，直到不重名为⽌。如果存在，则赋值为本⾝再循环
SELECT_DIV=(ElementById(tmpNm)==null)?tmpNm:SELECT_DIV;
}
/
/以同样的命名⽅式为注释层取名
for(var i=ElementById(NODE_DIV)!=null;i++){
var tmpNm = NODE_DIV + i;
NODE_DIV=(ElementById(tmpNm)==null)?tmpNm:NODE_DIV;
}
//为隐藏下拉框创建⼀个对应的层，并且刚初始化时为隐藏的
document.write ('<div id="' + SELECT_DIV + '" ></div>')
//同样⽅式创建⼀个注释层
document.write ('<div id="' + NODE_DIV + '" style="position: absolute;'
+ 'cursor: default;border: 1px solid #B2B2B2;background-color:#ffffd9;display: none;'
+ 'overflow-x:auto;word-wrap:break-word"></div>')
// 获取某对象的坐标
function getObjPosition(Obj){
try{
var sumTop=0;
var sumLeft=0;
while(Obj!=window.document.body){
sumTop+=Obj.offsetTop;
sumLeft+=Obj.offsetLeft;
Obj=Obj.offsetParent;
}
return {left:sumLeft,top:sumTop};
}catch(e){alert(e);}
}
//处理Div中的选项/* 某个选项，⽂本框的ID */
function optionDivOnmouseover(optionDivObj,textId){
//⽂本框
var ElementById(textId);
//optionDivObj.parentNode为某select option选项所对应层的⽗对象，即SELECT_DIV层//得到select下拉框所有option选项所对应的层
var objChilddiv=ElementsByTagName("div");
//清空所有选项层的样式，即去掉原来背景为蓝⾊的选项层的样式
for(var i=0; i < objChilddiv.length; i++){
objChilddiv[i].style.cssText='';
}
//使本⾝选项层的背景为蓝⾊，字为⽩⾊，模拟选中样式
optionDivObj.style.cssText='background-color: #330066;color: #ffffff;'
var noteDivObj =ElementById(NODE_DIV);
var selectDivObj =ElementById(SELECT_DIV);
///////设置注释层中的选项及位置
setNoteDivObj(textObj,optionDivObj,selectDivObj,noteDivObj);
//点击某个选项层时
//点击选项后选择层后要隐藏，即要设置成失去焦点状态
cursorInSelectDivObj=false;
//把选中的某选项层的内容赋值为⽂本框
if(ie){
textObj.value=optionDivObj.outerText;
}
else
{
textObj.Content;
}
//var noteDivObj =ElementById(NODE_DIV);
//点击某个选项层时，对应的注释层也要隐藏
noteDivObj.style.display='none';
//点击过后使⽂本框获取焦点
textObj.focus();
////////调⽤⽂本框失去焦点触发的⽅法
textObjectBlur(selectDivObj,noteDivObj);
}
}
/**
* textObj:⽂本框
* seleObj：下拉框
* noteArr:noteArr 注釋數組，沒有可以不传或为null或空数组
*/
function showSelect(textObj,seleObj,arrNote){
textObject = textObj;
//保存全局注释，供其他⽅法使⽤
noteArr = arrNote;
var selectDivObj =ElementById(SELECT_DIV);
var noteDivObj =ElementById(NODE_DIV);
var seleObj =ElementById(seleObj);
///////⿏标移出下拉框层时
//当⿏标移出选择层时，设置选择层为失去焦点状态
cursorInSelectDivObj=false;
//当⿏标移出选择层时，让⽂本框获取焦点
textObj.focus();
}
///////⽂本框失去焦点时
textObjectBlur(selectDivObj,noteDivObj);
}
///////⿏标经过下拉框层时
//当⿏标移进选择层时，设置选择层为获得焦点状态
javascript全局数组
cursorInSelectDivObj=true;
}
///////⽂本框点击时
//设置下拉框对应层中的选项及位置
setSelectDivObj(textObj,selectDivObj,seleObj);
//设置注释层中的选项及位置
setNoteDivObj(textObj,null,selectDivObj,noteDivObj);
//⾃动匹配与模糊定位
autoMatch(textObj,selectDivObj);
}
/
//////⽂本框上输⼊时
//如果按的是Tab键时直接退出
if(event.keyCode==9){
return false;
}
if(event.keyCode==13){
enter(textObj,selectDivObj,noteDivObj);
return false;
}
//设置下拉框对应层中的选项及位置
setSelectDivObj(textObj,selectDivObj,seleObj);
//如果按了上下键时
if(event.keyCode == 38 || event.keyCode == 40 ){
var selectedOptionDiv = downOrUp(textObj,selectDivObj,noteDivObj,seleObj);
//设置注释层中的选项及位置
setNoteDivObj(textObj,selectedOptionDiv,selectDivObj,noteDivObj);
}else{
//设置注释层中的选项及位置
setNoteDivObj(textObj,null,selectDivObj,noteDivObj);
}
//⾃动匹配与模糊定位
autoMatch(textObj,selectDivObj);
}
}
// 隐藏遮挡ID为objID的对象（层）的所有select
function hiddenOverSelects(objID){
var sels = ElementsByTagName('select');
for (var i = 0; i < sels.length; i++){
if (ElementById(objID), sels[i])){
sels[i].style.visibility = 'hidden';
}else{
sels[i].style.visibility = 'visible';
}
}
}
//判断obj1是否遮挡了obj2
function obj1OverObj2(obj1, obj2){
var pos1 = getObjPosition(obj1)
var pos2 = getObjPosition(obj2)
var result = true;
var obj1Left = pos1.left - window.document.body.scrollLeft;
var obj1Top = p - window.document.body.scrollTop;
var obj1Right = obj1Left + obj1.offsetWidth;
var obj1Bottom = obj1Top + obj1.offsetHeight;
var obj2Left = pos2.left - window.document.body.scrollLeft;
var obj2Top = p - window.document.body.scrollTop;
var obj2Right = obj2Left + obj2.offsetWidth;
var obj2Bottom = obj2Top + obj2.offsetHeight;
if (obj1Right <= obj2Left || obj1Bottom <= obj2Top ||
obj1Left >= obj2Right || obj1Top >= obj2Bottom)
result = false;
return result;
}
//⽂本框失去焦点时调⽤的⽅法
function textObjectBlur(selectDivObj,noteDivObj){
//如果点击了某个选项后，已设置选择层为失去焦点状态，此时选择层可以隐藏了if(!cursorInSelectDivObj){
selectDivObj.style.display='none';
}
if(ie){
//恢复所有已被隐藏的下拉框
hiddenOverSelects(selectDivObj.id);
if(noteDivObj.style.display=='inline'){
noteDivObj.style.display=selectDivObj.style.display;
}
if(selectDivObj.style.display=='none'){
noteDivObj.style.display='none';
}
}
}
//设置下拉框对应层中的选项及层位置
function setSelectDivObj(textObj,selectDivObj,seleObj){
//如果已显⽰，则直接退出
if(selectDivObj.style.display=='inline'){
return false;
}
//如果⽂本框的id为空时，则要命名
for(var i=0;textObj.id=='';i++){
var tmpNm = "textSelect" + i;
textObj.id = (ElementById(tmpNm)==null)?tmpNm:'';
}
selectDivObj.style.left = getObjPosition(textObj).left;
p = getObjPosition(textObj).top + textObj.offsetHeight;
selectDivObj.style.width = textObj.offsetWidth;
selectDivObj.style.height = '';
selectDivObj.style.overflowY = '';
selectDivObj.innerHTML=''
//读取select的项⽬放到Div⾥。
for(var x = 0; x<seleObj.options.length; x++){
selectDivObj.innerHTML+="<div onmouseover=\"optionDivOnmouseover(this,'" + textObj.id
+ "')\" style='width:100%;white-space: nowrap;cursor: default;'>"
+seleObj.options[x].text+"</div>";
}
//调整Div⾼度，过度显⽰滚动条
if(x > 8){
selectDivObj.style.height=13 * 8;
selectDivObj.style.overflowY='auto';
}else{
selectDivObj.style.height=15 * x;
selectDivObj.style.overflowY='auto';
}
selectDivObj.style.display='inline';
if(ie){
hiddenOverSelects(selectDivObj.id);
}
}
//设置下拉框对应层中的选项及层位置
function setNoteDivObj(textObj,optionDivObj,selectDivObj,noteDivObj){ //如果需要显⽰对应键的注释时
if(noteArr != null && noteArr != undefined){
//获取下拉框所对应的层的宽度与左边距
var regStr = new RegExp("(([0-9]+)px)");
selectDivObj.style.width.match(regStr);
var width=RegExp.$2;
regStr = new RegExp("(([0-9]+)px)");
selectDivObj.style.left.match(regStr);
var left= RegExp.$2;
//设置注释层的位置与⼤⼩
noteDivObj.style.left=parseInt(width) +parseInt(left);
p=p;
noteDivObj.style.width=width*1;
noteDivObj.style.height=selectDivObj.style.height;
var i = 0;
//如果到对应的注释，则显⽰注释层
for(i = 0;i < noteArr.length;i++){
if(optionDivObj==null && textObj.value == noteArr[i][0]){
noteDivObj.innerText=noteArr[i][1];
noteDivObj.style.display="inline";
break;
}else if(optionDivObj !=undefined
&& optionDivObj !=null
&& optionDivObj.outerText == noteArr[i][0]){
noteDivObj.innerText=noteArr[i][1];
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论