HTML - combo editable

   
Vista:

combo editable

Publicado por aleOpen (1 intervención) el 04/11/2011 15:25:32
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Pagina nueva 1</title>
</head>
<script>



function editaCombo(tecla, cb){
var el=document.getElementById(cb.id+'e');
if (!el){var padre=cb.parentNode; el=document.createElement('input');el.type='text';el.id=cb.id+'e';padre.appendChild(el);}
el.style.position = "absolute";
el.style.width =cb.offsetWidth-15+'px';
el.style.height =cb.offsetHeight+'px';
el.style.left =cb.offsetLeft+'px';
el.style.top =cb.offsetTop+'px';
el.value=String.fromCharCode(tecla.charCode);
el.style.display='block';el.setAttribute('rel',cb.id);el.onblur=function(){if(this.value>''){var ca=this.value.toLowerCase();var el=document.getElementById(this.getAttribute("rel",0));var op=el.innerHTML;if(op.toLowerCase().indexOf(ca,0)<0){ el.options[el.length] = new Option(this.value,this.value);};el.value = this.value;}this.style.display='none'};el.onkeydown=function(e){if(e && e.keyCode==13) {e.target.blur();} else if(e && e.keyCode==27){ e.target.value=''; e.target.blur();}; };el.focus();};


</script>
<body>
<input id="one4" type="text">
<select id='due' onkeypress="editaCombo(event,this);">
<option>Uno</option>
<option>Dos</option>
<option>Tres</option>
</select>
<input id="tres" type="text">

</body>

</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder