Keuze uit een dropdownlist gebruiken met een tekstveld

Status
Niet open voor verdere reacties.

rabbit34

Nieuwe gebruiker
Lid geworden
6 aug 2008
Berichten
4
Hallo,
Ik zit met een probleem ben er al even mee bezig maar kom er niet uit.
Ik wil als je een tekst invul in het tekstveld en een lettertype uit de dropdownlist kiest dat hierdoor de tekst word weergegeven in de gekozen lettertype.
Is er iemand die hier een oplossing voor weet.
 
Jawel, met wat HTML en Javascript-magie moet het lukken:
HTML:
<span id='display'>Test</span>

<input type='text' id='typert' value='Test' />

<select id='sel'>
   <option value='arial'>Arial</option>
   <option value='tahoma'>Tahoma</option>
</select>

[JS]var d = document.getElementById('display');
var i = document.getElementById('typert');
var s = document.getElementById('sel');

i.addEventListener('keydown', function()
{
d.innerHTML = i.value;
}, false);

s.addEventListener('change', function()
{
switch(s.options[s.selectedIndex])
{
case 'arial':
d.style = "font-family: Arial";
break;
// moar
}
}, false);[/JS]zoiet is het idee. Dit is uit t hoofd, dus niet getest. Ohja, en werkt niet in IE, want die heeft geen addEventListener


:thumb:
 
Laatst bewerkt:
Hoi,

Ik ben er mee bezig geweest maar hij laat niet een gekozen lettertype zien hij geeft alleen lettertype Arial en geen andere.

Krijg ook geen foutmelding.
 
Aha, ik zat aan zoiets te denken:
HTML:
<input type='text' id='invulvak' value='Rillend koud'>
<select id='fontSelect' onchange="vervang()">
   <option value='kies' disabled selected>(lettertype)</option>
   <option value='Arial'>Arial</option>
   <option value='Comic Sans MS'>Comic Sans MS</option>
   <option value='Tahoma'>Tahoma</option>
   <option value='Courier'>Courier</option>
</select>
met:
[JS]function vervang(){
var verander = document.getElementById('invulvak');
var fontSelect = document.getElementById('fontSelect');
var geselecteerd = fontSelect.options[fontSelect.selectedIndex].value;
if (geselecteerd != 'kies'){
verander.style.fontFamily = geselecteerd;
}
}[/JS]
Wat dan zoiets als deze in de praktijk wordt.
Doen we nog aan IE? Met ingang van IE6, hebben die van IE ook niet te mopperen! :)

Met vriendelijke groet,
CSShunter

PS:
Niet onbelangrijk! Als je dit niet alleen op je eigen computer of op een intranet wilt gebruiken, maar het aan iedere bezoeker op je site wilt laten zien, dan kunnen alleen de meest gebruikte internet-veilige lettertypes gebruikt worden!
Of het gekozen lettertype ook inderdaad getoond kan worden, hangt er namelijk van af, of de bezoeker dat lettertype geïnstalleerd heeft staan op zijn/haar computer!
Fantasie-letters die bv. met een of ander tekenprogramma zijn meegekomen, tellen dus niet mee; want lang niet iedereen zal datzelfde tekenprogramma hebben; enz.
  • De Windows XP-ridders en -jonkvrouwen (waar ik er 1 van ben) hebben bijvoorbeeld niet standaard de Calibri op de PC. Die werd pas mee-verscheept met Vista (en ook met MS Office 2007, wat ook niet iedereen heeft; ik niet bv.).
    Op de Apple'tjes zitten pc-lettertypes soms met een andere naam, of met een verwant lettertype met andere naam. Enz.
    Zie o.a. deze, of Google op web safe fonts.
Nu valt daar eventueel wel een workaround voor te verzinnen: dan moet je een hele lettertype-bibliotheek aanleggen en geschikt maken voor meezenden met je pagina.
Maar dat is een heel omvangrijke en pittig ingewikkelde klus. :confused:
 
Laatst bewerkt:
Hoi CSShunter,

Bedankt voor je hulp

Wat ik ook graag zou willen is dat als er uit en andere dropdownlist met kleuren de gekozen lettertype uit de andere dropdownlist deze gekozen kleur krijgt.
Maar kom hier niet uit weet jij hier een oplossing voor hoe ik dat moet doen.

Mvg,
Rabbit34
 
Hoi CSShunter,

Het is geen huiswerk.

Ik doe wat aan snijwerk (in folie voor bv reclame op auto's) nu ben ik een website aan het maken waar een persoon die wat wil laten uitsnijden zijn tekst kan invoeren en dan kiezen in een lettertype en kleur.
Nu wil ik graag dat op de site zijn tekst word weergegeven in de gekozen letertype en kleur.
Een dropdownlist maken heb ik al gedaan bij de lettertype komt er bij de gekozen letertype een image met de lettertype getoond.
Bij de dropdownlist met kleur heb ik op elke regel hierin een andere kleur.
Maar het lijk mij mooier om ook de ingegeven tekst in de gekozen lettertype en kleur te weergeven.

Maar ben hier al een tijd mee aan het worstelen maar krijg het niet voor elkaar.
Dus daarom stel ik hier de vraag.

Mvg,
Rabbit34
 
Hoi Rabbit34,
Ha, geen huiswerk maar het echte leven! Mooi, dan gaan we gauw verder.

Wordt vervolgd,
Met vriendelijke groet,
CSShunter
 
  • Aan het eerdere voorbeeld heb ik nu de keuze-opties voor een letterkleur toegevoegd, met hetzelfde soort javascript om de kleur meteen te kunnen zien.

  • bij het lettertype wordt er bij het gekozen lettertype een image met het lettertype getoond.
    Die heb ik er veiligheidshalve ook bij gezet, voor geval men een bepaald lettertype niet op zijn/haar computer heeft staan.

  • Verder een <noscript> waarschuwing toegevoegd voor als men javascript uit mocht hebben staan: dan werkt het niet!

  • En tenslotte heb ik ook een automatische "reset" toegevoegd, zodat als men op de "refresh"/"reload" knop van de browser klikt, alles weer in de beginstand terugkomt (als je dat niet doet, blijven soms aangeklikte opties hangen, terwijl het invulvakje wel weer naar de beginstand gaat).
En het resultaat: www.developerscorner.nl/csshunter/tests/font-change2.htm

Heb je hier wat aan?
Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan