Invoerveld met suggesties
Hieronder zie je een invoerveld. Daar kun je alles in typen wat je in een normaal tekstveld kunt ingeven. Als je op het veld klikt verschijnt er een menu met mogelijkheden. Als je een (willekeurige) letter uit een menu-item typt, krimpt het menu zodat alleen de items die die letter bevatten nog zichtbaar zijn.
Op deze pagina wordt getoond hoe je zoiets maakt. De code staat onderaan de bladzijde. Die kun je ook downloaden om zelf
te gebruiken.
De toepasbaarheid is helaas beperkt. Het werkt niet op een computer met een aanraakscherm. Doordat
het invoerveld bij dergelijke schermen gemakkelijk de focus verliest, is het niet goed mogelijk om data in te voeren of om
iets uit de lijst te kiezen. Sommige browsers tonen het menu in het schermtoetsenbord. Edge laat wel de knoppen zien maar
de menu-items zijn niet leesbaar.
- Er worden twee items besproken:
- De werking van het script.
- Toepassen in je eigen site.
- Inspiratie voor dit item is ontstaan door sites op internet die dit hebben.
- De code van het voorbeeld bestaat uit alleen HTML. Om op de knop te reageren wordt wat JavaScript ingezet.
Bronnen op internet zeggen dat het niet mogelijk is om het menu (een <datalist>) op te maken met CSS. De code die kan worden gedownload van de enige bron waar het wel werkt, (codepen.io) werkt niet als het wordt ingebouwd in deze site
. Het menu gebruikt daarom de default-instellingen
van de browser. - De werking van het script
- Zodra het invoerveld de focus krijgt, verschijnt er een menu. Daar kan een item uitgekozen worden, dat in het invoerveld
wordt gezet. Dat kan daarna nog worden bewerkt. Een keuze is echter niet verplicht. Het invoerveld accepteert alle data, zonder
restrictie.
- HTML
- De HTML van het voorbeeld bestaat uit een <div>-tag, met daarbinnen een <input> van het type text, een <datalist> met een aantal <option>s en een <button>.
- De <div> positioneert het geheel in het document. In dit geval in een style-attribuut gebruikt.
- De <input>-tag heeft twee noodzakelijke attributen, nl. list, die verwijst naar de <datalist>, en autocomplete, die uit staat.
- Gebruik van het value-attribuut binnen de <option>s is mogelijk, maar dan moet de content worden leeg gelaten. Alleen content kan ook, maar dan moet value worden weggelaten.
- Voor de communicatie met JavaScript is er een id. Het attribuut name is bij dit voorbeeld niet nodig, maar
staat er bij voor de volledigheid.
- JavaScript
- Het JavaScript is nodig om te reageren op de keuze van de gebruiker. Hier is dat alleen om de melding op het scherm te
krijgen. Hier is dat de function laatZien(), die de melding toont via window.alert().
- Toepassen in je eigen site
- Download de .zip-file en pak hem uit. Bouw de code op zoals hieronder is aangegeven. Je hebt nu een werkend voorbeeld
- Pas de inhoud van de <options>s binnnen de <datalist>aan voor je eigen doeleinden.
- Maak een nieuwe function als vervanging voor laatZien() om de respons van de gebruiker te verwerken. Pas dan ook
attribuut onclick aan in de <button>-tag.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code van het voorbeeld ziet er als volgt uit:
(Zet dit in de <HEAD>).
<script>
function laatZien() {
window.alert("in het invoerveld staat:\n" + document.getElementById('invoer').value);
}
</script>
(Zet dit in de <BODY> op de plaats waar het invoerveld en de knop moeten verschijnen)
<div style="text-align:center">
<input type="text" list="lijst" id="invoer">
<datalist id="lijst">
<option value="HTML"></option>
<option value="CSS"></option>
<option value="JavaScript"></option>
<option value="PHP"></option>
</datalist>
<button type="button" onclick="laatZien()">Laat zien wat er in het invoerveld staat</button>
</div>
Downloaden:
Druk op de knop:
File: voorb789.zip, 476 bytes.
Opmerking:
Als het invoerveld niet (nooit) bewerkt hoeft te worden, is een <listbox>
een betere / veiligere keuze.
