Input veranderen in select bij focus

[spone]

Ik ben bezig met een systeem voor het beheren van meerdere characters per account. On the fly moet er geswitcht kunnen worden tussen de verschillende characters.

Momenteel is de situatie als volgt.


Wanneer er op de change-link gedrukt wordt, gaat de browser naar een pagina met character-selectie. Nu wil ik dit anders: de tekst die er staat bij active character, moet zodra deze de focus krijgt, veranderen in een selectiebox. Ik heb het vermoeden dat dit mogelijk is door meerdere div-jes precies over elkaar heen te zetten, en dan wanneer de tekst (in de vorm van een borderloze <input>) de focus krijgt, de div met de input te laten verbergen en de div met de <select> naar voren te gooien.
Naar mijn mening is dit een beetje overbodig programmeerwerk, en moet dit stukken netter kunnen. Een tijd geleden had ik op een website (al sla je me dood welke) zo'n dergelijke constructie gezien, zoals ik die nu voor ogen heb, maar kan em niet meer vinden. Volgens mij zat deze in de hoek van css en javascript, waarbij het type van de entiteit veranderd werd (?).

Nu heb ik ongeveer een half uur gezocht op google, en got, maar met termen als css, javascript, input, div, change en select is het zoeken naar een naald in een hooiberg

Wie kan een balletje opgooien hoe ik deze constructie het beste kan realiseren?

[spone]

Iemand?

[André]

Kun je niet gewoon een input type="text" gebruiken die je zo styled dat hij niet opvalt? En bij een click maak je er een echte textbox van:

[ Voor 11% gewijzigd door André op 19-03-2006 18:16 ]

[Verwijderd]

je zou zoiets kunnen doen:

HTML:

<div id="usertext">username (<a href="#" onclick="toggleDisplay(); return false;">change</a>)</div>
<div id="userselect" style="display: none;"><!-- hier je selectbox --></div>

en dan in de functie toggleDisplay() de div usertext display="none" geven en de div userselect display="block"

[spone]

André schreef op zondag 19 maart 2006 @ 18:15:
Kun je niet gewoon een input type="text" gebruiken die je zo styled dat hij niet opvalt? En bij een click maak je er een echte textbox van:

<input type="text" value="Test" style="background: #F3F3F2; border: 1px solid #F3F3F2;" onmouseover="this.style.background='#FFFFFF'; this.style.border='1px solid #000000;'" onmouseout="this.style.background='#F3F3F2'; this.style.border='1px solid #F3F3F2;'">

Het probleem hierbij is dat de gebruiker niet kan kiezen welke character hij wil. En om hem nou de naam volledig te laten typen is in mijn optiek nou niet echt gebruikersvriendelijk

offtopic:
bah, jij hebt wel html-post-rechten en wij niet

Verwijderd schreef op zondag 19 maart 2006 @ 20:11:
je zou zoiets kunnen doen:

HTML:

<div id="usertext">username (<a href="#" onclick="toggleDisplay(); return false;">change</a>)</div>
<div id="userselect" style="display: none;"><!-- hier je selectbox --></div>

en dan in de functie toggleDisplay() de div usertext display="none" geven en de div userselect display="block"

Ik heb zoiets dergelijks met 2 <span>'s geprobeerd, en toen werden de 2 spans gewoon naast elkaar geparkeerd, hidden of niet. De ene was wel hidden, maar nam wel de volle ruimte in. Ik zal hier echter eens even naar kijken

[ Voor 53% gewijzigd door spone op 19-03-2006 23:02 ]

[Verwijderd]

je moet ook niet display:hidden gebruiken, maar disaply: none. bij hidden neemt het element wel ruimte in, bij none niet.
en spans zijn inderdaad natuurlijk beter dan divs in dit geval.

[ Voor 22% gewijzigd door Verwijderd op 20-03-2006 07:29 ]

[Mexicanos]

Je kunt anders ook nog gebruik maken van innerHTML en op deze manier als iemand klikt de input veranderen door select.

code:

<SPAN ID="Verander" onClick="VeranderHTML();">Tekst</SPAN>

Javascript:
function VeranderHTML() {
  document.getElementById('Verander').innerHTML = '<SELECT>......</SELECT>'
  document.getElementById('Verander').onclick = new Function ("")
}

[XWB]

Gewoon een beetje met het DOM spelen, hier een eenvoudig voorbeeld:

JavaScript:

<script language="javascript" type="text/javascript">
function makeSelect ()
{
    var element = document.createElement('select');
    element.name = 'character'; 
    element.style.width = 150;
    var dest = document.getElementById('character');
    while (dest.hasChildNodes()) 
    {
        dest.removeChild(dest.firstChild);
    }
    
    dest.appendChild(element);
}
</script>
<div id="character" style=" border: 1px #000000 solid; width: 20%;">Active character: Username <a href="javascript:void(0);" onclick="makeSelect();">(change)</a></div>

Niet getest in IE overigens. Het enige dat hier nog ontbreekt zijn options. Die values zou je met een ajax trucje uit de database kunnen halen.

/edit
Even voorbeeldje voor jou online gezet klik

[ Voor 30% gewijzigd door XWB op 20-03-2006 18:10 ]

[spone]

@Mexicanos & Hacku: Dit zijn inderdaad een beetje de dingen die ik zoek Hier ga ik eens even mee aan de gang, en meld me als het wel of niet gelukt is

[X-Lars]

Verwijderd schreef op maandag 20 maart 2006 @ 07:27:
je moet ook niet display:hidden gebruiken, maar disaply: none. bij hidden neemt het element wel ruimte in, bij none niet.
en spans zijn inderdaad natuurlijk beter dan divs in dit geval.

Het is display:none|block|whatever; en visibility:visible|hidden;