/*
combobox
Version: 2.2.1
Änderungen:
2.2.1
Das Boxmodell richtig berechnen
*/
function createCombobox() {
if( !document.createElement) return;
var inputName = 'input_' + Math.random();
var tmp, x, offset_height, width_scrollbar
// padding und border ermitteln, wg. Boxmodell
tmp = document.createElement('input');
document.body.appendChild( tmp );
x = tmp.offsetHeight;
tmp.style.border = 'none';
tmp.style.padding = '0';
offset_height = x - tmp.offsetHeight;
document.body.removeChild( tmp );
// und die Größe der Scrollbars
document.body.style.overflow = 'hidden';
x = document.body.offsetWidth || document.body.clientWidth;
document.body.style.overflow = 'scroll';
width_scrollbar = x - (document.body.offsetWidth || document.body.clientWidth);
if(!width_scrollbar) width_scrollbar = document.body.offsetWidth - document.body.scrollWidth;
width_scrollbar += offset_height;
document.body.style.overflow = '';
function addInput(el) {
/*/////////////////////////////////////////////////
der Auswahliste das Inputfeld hinzufügen
/////////////////////////////////////////////////*/
// Das Inputfeld
var input = document.createElement('input');
input.style.position = 'absolute';
input.parent = el;
if(IE) {
/*/////////////////////////////////////////////////
IE Bug
Der IE überdeckt keine Auswahliste mit anderen Elementen
ausser mit iframes, daher muss für den IE ein zusätzliches DIV,
mit einem iframe eingefügt werden.
http://dotnetjunkies.com/WebLog/jking/archive/2003/07/21/488.aspx
/////////////////////////////////////////////////*/
var div = document.createElement('div');
div.style.position = 'absolute';
div.style.overflow = 'hidden';
var iframe = document.createElement('iframe');
iframe.style.position = 'absolute';
iframe.scrolling = 'no';
iframe.src = 'javascript:false';
div.appendChild(iframe);
el.form.appendChild(div);
el.div = div;
iframe.style.height = '100%';
iframe.style.width = '100%';
}
el.form.appendChild(input);
el[inputName] = input;
}
function fixSize(el) {
/*/////////////////////////////////////////////////
die Größe der Elemente an die Auswahliste anpassen
/////////////////////////////////////////////////*/
// Größe und Ort des Selectfeldes
var r = getRect( el );
// Das Inputfeld
with( el[inputName] ){
if (IE) {
style.top = (r.top+1) + 'px';
style.left = (r.left+1) + 'px';
style.border = 'none';
} else {
style.top = r.top + 'px';
style.left = r.left + 'px';
}
style.height = (-offset_height + r.height) + 'px';
style.width = ( r.width - width_scrollbar ) + 'px';
}
return;
// Im IE 7 geht es ohne den folgenden Code.
if(IE) {
/*/////////////////////////////////////////////////
das DIV mit dem iframe
/////////////////////////////////////////////////*/
var x = el.div;
x.style.top = r.top + 'px';
x.style.left = r.left + 'px';
x.style.height = r.height + 'px';
x.style.width = (r.width - width_scrollbar)+ 'px';
}
}
function getRect (o){
if(!o) return;
var rect = { left:0, top: 0, height: o.offsetHeight, width: o.offsetWidth };
while (o)
{
rect.top += parseInt(o.offsetTop );
rect.left += parseInt(o.offsetLeft );
o = o.offsetParent;
}
return rect;
}
/*
Intialisierung
*/
var IE = (document.all && !window.opera);
var f = window.document.forms;
// Alle Formulare
for(var i = 0; i < f.length; i++)
// Alle Elemente eines Formulares
for(var k = 0; k < f[i].elements.length; k++) {
var el = f[i].elements[k];
if( !el || !el.type || el.type.indexOf('select') == -1
|| !el.className ||
el.className.toLowerCase().indexOf('combobox') == -1
)
continue; // keine Combobox
// Eine Hilfsfunktion um den gewählten Wert der Auswahliste zu ermitteln
el.getValue = function() {
return this.options[this.selectedIndex].value
|| this.options[this.selectedIndex].text
|| this.options[this.selectedIndex].innerText
;
}
/*
Workaround:Eine Leerzeile einfügen, damit aus der Auswahliste
etwas gewählt werden kann, bzw. onchange feuert.
*/
var l = el.options.length;
while(l) {
el.options[l] = new Option( el.options[l - 1].text, el.options[l - 1].value) ;
l--;
}
el.options[0] = new Option(' ', ' ' );
el.selectedIndex = 0;
addInput(el);
fixSize(el);
el[inputName].name = el.name;
//el.name = '';
el[inputName].onfocus = function () {
var c = this.parent;
if(!c) return;
if(this.value == c.getValue() ) this.value = '';
};
el.onchange = function() { this[inputName].value = this.getValue(); }
}
}
