300分求高人指点，顶着有分

原帖
http://community.csdn.net/Expert/topic/4181/4181425.xml?temp=.6319849
http://community.csdn.net/Expert/TopicView.asp?id=4156239

我把问题简化一下，整理了下面这个Html。
运行时先按下[Call insertComboBox()]按钮，会出现一个所谓的combo(很丑陋)，然后将鼠标点入text部分,就是使text部分获得focus。点击text以外的部分，combo会消失。程序原意是点击“I”按钮会有下拉菜单，可现在点击“I”按钮combo也会消失。如何改才能达到当点击“I”按钮时这个combo不会消失。

------------------------------------------------------------------------
<HTML>
<HEAD>
<TITLE> combo sample </TITLE>
<script type="text/javascript">
var _dom = (document.all ? (document.getElementById ? 2 : 1) :
    (document.getElementById ? 4 : (document.layers ? 3 : 0)));

function setDivVisibility(div, visible) {
  if (_dom == 4 || _dom == 2 || _dom == 1) {
    div.style.visibility = (visible) ? 'inherit' : 'hidden';
    return;
  }
  if (_dom == 3) {
    div.visibility = (visible) ? 'inherit' : 'hide';
    return;
  }
}

function ComboBox(blurFunc) {
  this.type = "combo";
  this.blurFunc = blurFunc;
  this.visibility = false;

  this.options  = new Array();
  this.expops   = new Array();
  this.value    = "";
  this.setFocus = setFocus_ComboBox;
  this.setVisibility = setVisibility_ComboBox;
  this.getVisibility = getVisibility_ComboBox;
  this.create();
}

function setFocus_ComboBox() {
  this.txtview.focus();
}

function setVisibility_ComboBox(visible) {
  this.visibility = visible;
  setDivVisibility(this.lyr, visible);
}

function getVisibility_ComboBox() {
  return this.visibility;
}

ComboBox.prototype.create = function() {
  this.lyr = document.createElement("DIV");
  this.lyr.style.position='absolute';

  this.txtview = document.createElement("INPUT");
  this.txtview.name = "SPComboBox";
  this.txtview.id   = "SPComboBox";
  this.txtview.className = "combo-input";
  this.txtview.parent = this;
  this.txtview.onblur = blur_ComboBox;
  this.lyr.appendChild(this.txtview);

  this.valcon = document.createElement("INPUT");
  this.valcon.type = "hidden";
  this.lyr.appendChild(this.valcon);

  this.button = document.createElement("BUTTON");
  this.button.appendChild(document.createTextNode('I'));
  this.button.className = "combo-button";
  this.button.style.position = "absolute";
  this.button.parent = this;

  this.lyr.appendChild(this.button);
  this.button.onfocus = function () {
    //alert("[button.onfocus] start ... ");
    this.blur();
  };

  this.button.onmousedown = this.toggle;

  this.txtview = this.lyr.childNodes[0];
  this.valcon  = this.lyr.childNodes[1];

  document.body.appendChild(this.lyr);
}

ComboBox.prototype.toggle = function() {
  //alert("[toggle] start ... ");
}

function blur_ComboBox() {
  //alert("[blur_ComboBox] start ... ");
  var theCombo = this.parent;

  if (theCombo != null) {
    if (theCombo.blurFunc) {
      theCombo.blurFunc();
    }

    theCombo.setVisibility(false);
  }
}

function insertComboBox() {
  var combox = new ComboBox(onBlurFunc);
}

function onBlurFunc() {
  //alert("[onBlurFunc] start...");
}

</script>

</HEAD>

<BODY">
<button onclick="insertComboBox();">Call insertComboBox()</button>
</BODY>
</HTML>
-------------------------------------------------------------------------

16 个解决方案

#1

现成的例子和代码

http://krolik.net/ComboBox.shtml

#2

有分的啊，那就顶一下。。。

#3

我也顶啊

#4

路过学习

#5

UP.

#6

路过帮顶

#7

可输入下拉框
http://jkisjk.vip.sina.com/html/EditableSelect1.htm

空间已经过期，代码无法更新，仅供效果演示

#8

何解

#9

顶一下

#10

学习学习

#11

好好学习

#12

太长了，看的头晕。
帮你顶一下

#13

#14

我试了一下，这样做是不是你要的呢？
-----------------------------------------------------------------------------------
<HTML>
<HEAD>
<TITLE> combo sample </TITLE>
<script type="text/javascript">
var _dom = (document.all ? (document.getElementById ? 2 : 1) :
    (document.getElementById ? 4 : (document.layers ? 3 : 0)));

function setDivVisibility(div, visible) {
  if (_dom == 4 || _dom == 2 || _dom == 1) {
    div.style.visibility = (visible) ? 'inherit' : 'hidden';
    return;
  }
  if (_dom == 3) {
    div.visibility = (visible) ? 'inherit' : 'hide';
    return;
  }
}

function ComboBox(blurFunc) {
  this.type = "combo";
  this.blurFunc = blurFunc;
  this.visibility = false;

  this.options  = new Array();
  this.expops   = new Array();
  this.value    = "";
  this.setFocus = setFocus_ComboBox;
  this.setVisibility = setVisibility_ComboBox;
  this.getVisibility = getVisibility_ComboBox;
  this.create();
}

function setFocus_ComboBox() {
  this.txtview.focus();
}

function setVisibility_ComboBox(visible) {
  this.visibility = visible;
  setDivVisibility(this.lyr, visible);
}

function getVisibility_ComboBox() {
  return this.visibility;
}

ComboBox.prototype.create = function() {
  this.lyr = document.createElement("DIV");
  this.lyr.style.position='absolute';

  this.txtview = document.createElement("INPUT");
  this.txtview.name = "SPComboBox";
  this.txtview.id   = "SPComboBox";
  this.txtview.className = "combo-input";
  this.txtview.parent = this;
  this.txtview.onblur = blur_ComboBox;
  this.lyr.appendChild(this.txtview);

  this.valcon = document.createElement("INPUT");
  this.valcon.type = "hidden";
  this.lyr.appendChild(this.valcon);

  this.button = document.createElement("BUTTON");
  this.button.appendChild(document.createTextNode('I'));
  this.button.className = "combo-button";
  this.button.style.position = "absolute";
  this.button.onblur = blur_ComboBox1;
  this.button.parent = this;

  this.lyr.appendChild(this.button);
  this.button.onfocus = function () {
    //alert("[button.onfocus] start ... ");
    this.blur();
  };

  this.button.onmousedown = this.toggle;

  this.txtview = this.lyr.childNodes[0];
  this.valcon  = this.lyr.childNodes[1];

  document.body.appendChild(this.lyr);
}

ComboBox.prototype.toggle = function() {
  //alert("[toggle] start ... ");
}

function blur_ComboBox() {
  //alert("[blur_ComboBox] start ... ");
  var theCombo = this.parent;

  if (theCombo != null) {
    if (theCombo.blurFunc) {
      theCombo.blurFunc();
    }

    theCombo.setVisibility(false);
  }
}
function blur_ComboBox1() {
  var theCombo = this.parent;

  if (theCombo != null) {
    if (theCombo.blurFunc) {
      theCombo.blurFunc();
    }

    theCombo.setVisibility(true);
  }
}

function insertComboBox() {
  var combox = new ComboBox(onBlurFunc);
}

function onBlurFunc() {
  //alert("[onBlurFunc] start...");
}

</script>

</HEAD>

<BODY>
<button onclick="insertComboBox();">Call insertComboBox()</button>
</BODY>
</HTML>

#15

好长,刚开始学JS

#16

帮顶！

#1