利用javascript实现仿google文本框的有关问题
日期：2014-05-16 浏览次数：20419 次
利用javascript实现仿google文本框的问题
我想仿效google文本框的功能，并在此基础上增加了嵌套选择框，实现效果如附图，但是为什么当我选择自定义输入文字后当光标离开文本框时不会出现附图3那样由原来的文本框变为选择框，代码如下：
<html>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>文本框下拉提示</title><head>
<script language="javascript">
var
sel = "sel",
custom = "custom",
sDefault = "自定义";
var $ = {
// 显示自定义input
forInput : function() {
var oSel = document.getElementById(sel);
var oCus = document.getElementById(custom);
var iSel = oSel.options.selectedIndex;
var vSel = oSel[iSel].value;
if (vSel == sDefault) {
oSel.style.display = "none";
oCus.style.display = "";
oCus.focus();
}
},
// 显示带有自定义文本选项的select
forSel : function() {
var oSel = document.getElementById(sel);
var oCus = document.getElementById(custom);
oSel.style.display = "";
oCus.style.display = "none";
if (oCus.value.length == 0) {
return false;
}
for (var i = 0; i < oSel.length; i++) {
if (oSel[i].value == oCus.value) {
oSel[i].selected = true;
return false;
}
}
oSel.removeChild(oSel.lastChild); // 清除自定义选项
// 添加input的选项
var cSel = document.createElement("option");
cSel.value = oCus.value;
cSel.innerHTML = oCus.value;
cSel.selected = true;
oSel.appendChild(cSel);
// 补上自定义选项，确保该选项在末尾
cSel = document.createElement("option");
cSel.value = sDefault;
cSel.innerHTML = sDefault;
oSel.appendChild(cSel);
}
};
var intIndex=0;arrList = new Array();
arrList[intIndex++] = "GD001001";
arrList[intIndex++] = "GD001002";
arrList[intIndex++] = "GD001003";
arrList[intIndex++] = "GD001004";
arrList[intIndex++] = "GD001005";
arrList[intIndex++] = "GD001006";
arrList[intIndex++] = "GD001007";
arrList[intIndex++] = "GD001008";
arrList[intIndex++] = "GD001009";
arrList[intIndex++] = "GD0010010";
arrList[intIndex++] = "ABCDEFG";
function test() {
init();
smanPromptList(arrList,"inputer");
}
function init() {
if (arrList.constructor!=Array){alert('smanPromptList初始化失败:第一个参数非数组!');return ;}
arrList.sort( function(a, b) {
if(a.length>b.length)return 1;
else if(a.length==b.length)return a.localeCompare(b);
else return -1;
}
);
}
function smanPromptList(arrList,objInputId){
var objouter=document.getElementById("__smanDisp") //显示的DIV对象
var objInput = document.getElementById(objInputId); //文本框对象
var selectedIndex=-1;
var intTmp; //循环用的:)
if (objInput==null) {alert('smanPromptList初始化失败:没有找到"'+objInputId+'"文本框');return ;}
//文本框失去焦点
objInput.onblur=function(){
objouter.style.display='none';
}
//文本框按键抬起
objInput.onkeyup=checkKeyCode;
//文本框得到焦点
我想仿效google文本框的功能，并在此基础上增加了嵌套选择框，实现效果如附图，但是为什么当我选择自定义输入文字后当光标离开文本框时不会出现附图3那样由原来的文本框变为选择框，代码如下：
<html>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>文本框下拉提示</title><head>
<script language="javascript">
var
sel = "sel",
custom = "custom",
sDefault = "自定义";
var $ = {
// 显示自定义input
forInput : function() {
var oSel = document.getElementById(sel);
var oCus = document.getElementById(custom);
var iSel = oSel.options.selectedIndex;
var vSel = oSel[iSel].value;
if (vSel == sDefault) {
oSel.style.display = "none";
oCus.style.display = "";
oCus.focus();
}
},
// 显示带有自定义文本选项的select
forSel : function() {
var oSel = document.getElementById(sel);
var oCus = document.getElementById(custom);
oSel.style.display = "";
oCus.style.display = "none";
if (oCus.value.length == 0) {
return false;
}
for (var i = 0; i < oSel.length; i++) {
if (oSel[i].value == oCus.value) {
oSel[i].selected = true;
return false;
}
}
oSel.removeChild(oSel.lastChild); // 清除自定义选项
// 添加input的选项
var cSel = document.createElement("option");
cSel.value = oCus.value;
cSel.innerHTML = oCus.value;
cSel.selected = true;
oSel.appendChild(cSel);
// 补上自定义选项，确保该选项在末尾
cSel = document.createElement("option");
cSel.value = sDefault;
cSel.innerHTML = sDefault;
oSel.appendChild(cSel);
}
};
var intIndex=0;arrList = new Array();
arrList[intIndex++] = "GD001001";
arrList[intIndex++] = "GD001002";
arrList[intIndex++] = "GD001003";
arrList[intIndex++] = "GD001004";
arrList[intIndex++] = "GD001005";
arrList[intIndex++] = "GD001006";
arrList[intIndex++] = "GD001007";
arrList[intIndex++] = "GD001008";
arrList[intIndex++] = "GD001009";
arrList[intIndex++] = "GD0010010";
arrList[intIndex++] = "ABCDEFG";
function test() {
init();
smanPromptList(arrList,"inputer");
}
function init() {
if (arrList.constructor!=Array){alert('smanPromptList初始化失败:第一个参数非数组!');return ;}
arrList.sort( function(a, b) {
if(a.length>b.length)return 1;
else if(a.length==b.length)return a.localeCompare(b);
else return -1;
}
);
}
function smanPromptList(arrList,objInputId){
var objouter=document.getElementById("__smanDisp") //显示的DIV对象
var objInput = document.getElementById(objInputId); //文本框对象
var selectedIndex=-1;
var intTmp; //循环用的:)
if (objInput==null) {alert('smanPromptList初始化失败:没有找到"'+objInputId+'"文本框');return ;}
//文本框失去焦点
objInput.onblur=function(){
objouter.style.display='none';
}
//文本框按键抬起
objInput.onkeyup=checkKeyCode;
//文本框得到焦点
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
