Axel Richter: Erkennung: select-Element option-Liste ausgeklappt/eingeklappt

Beitrag lesen

Hallo,

Probleme gäbe es nur, wenn man bei einmaligem Focus die Liste zwei Mal aufklappt.

Das könnte man entschärfen, wenn man SELECT.onchange den Enter-Zähler wieder auf 0 setzt.

Beispiel:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Titel</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<style type="text/css">  
#control { position:absolute; top:200px; left:200px; width:200px; background-color:#00AFAF; padding:20px; }  
#control p { margin:0; padding:0; margin-bottom:5px; }  
</style>  
<script type="text/javascript">  
<!--  
window.onload = function() {  
 var myControl = document.getElementById("control");  
 var mySelect = myControl.getElementsByTagName("SELECT")[0];  
  
 myControl.onkeypress = function(e) {  
  e = (e)?e:window.event;  
  if(e.which == 13) absenden();  
  else if(e.keyCode == 13) absenden();  
  else return true;  
 };  
  
 mySelect.onfocus = function() {  
  this.EnterZaehler = 0;  
 };  
  
 mySelect.onchange = function() {  
  this.EnterZaehler = 0;  
 };  
  
 mySelect.onkeypress = function(e) {  
  e = (e)?e:window.event;  
  if(e.which == 13 && this.EnterZaehler == 0) {  
   mySelect.EnterZaehler = 1;  
   if (e.stopPropagation) e.stopPropagation();  
   else if (e.cancelBubble === false) e.cancelBubble = true;  
  } else if(e.keyCode == 13 && this.EnterZaehler == 0) {  
    mySelect.EnterZaehler = 1;  
    if (e.stopPropagation) e.stopPropagation();  
    else if (e.cancelBubble === false) e.cancelBubble = true;  
  }  
  else {  
   return true;  
  }  
 };  
};  
  
function absenden() {  
 alert("absenden");  
}  
//-->  
</script>  
</head>  
<body>  
<div id="control">  
<p><input type="Text" name="t1" value="" size="20" maxlength="20"></p>  
<p><select name="s1" size="1">  
 <option value="o1">O1</option>  
 <option value="o2">O2</option>  
 <option value="o3">O3</option>  
</select></p>  
<p><input name="ok" value="OK" type="button"></p>  
</div>  
</body>  
</html>  

viele Grüße

Axel