• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[GELOEST] Input = Text ausgeben

Senco Snifler

Neues Mitglied
Hallo zusammen,

gibt es eine Möglichkeit über das Inputfeld, ein bestimmten Text auszugeben?

Bild dient als Beispiel.

Im Inputfeld sollen die Länderkürzel eingegeben werden und durch den Button Enter, dann den jeweiligen Text anzeigen lassen, zu den Länderkürzel.

Über Hilfe würde ich mich freuen.


Länderkürzel.jpg
 
Werbung:
Klar geht das. Nur nicht mit HTML alleine. Womit willst Du das realisieren? Serverseitig mit PHP oder so? Oder mit JavaScript im Browser?
 
Werbung:
Dann musst Du das per JavaScript realisieren. Ein Ansatz dazu wäre zunächst ein JavaScript-Array mit einer Zuordnung der Länderkürzel zu den anzuzeigenden Texten. Dann kannst Du per EventHandler am Eingabefeld diese gegen das Array prüfen und den Text daneben ausgeben.
 
Hallo threadi,

gibt es eine Vorlage, kenne mich mit JavaScript nicht wirklich aus.

Kopier mir die Sachen auch wo anderes raus und ändere es um. :smile:
 
Werbung:
Hab echt alles abgesucht, scheint wirklich niemand das so gebraucht zu haben.

Komisch kann ja nicht wirklich der einzige sein, der sowas braucht.

Gibt es Seiten wo man sich sowas Programmieren lassen kann, für kleines Geld?

Werde noch weiter probieren, vielleicht schaffe ich es noch. :frown:
 
Werbung:
Hallo basti1012 Danke.

Für mein wissen hab ich soweit alles versucht.

Der Ansatz gefällt mir, schaue ob das auch ohne Dropdown lösbar wäre.

Haben 233 Länderkürzel und da ist es einfacher nur 2 Buschstaben einzugeben, als die Liste durch zu scrollen.

Ich danke dir dafür, bringt schon ein Schritt näher zum Ziel. :smile:
 
Das geht auch.
Du brauchst erstmal ein normales Textfeld.
Dann musst du wissen wie du es genau haben willst?
Soll nach den ersten Buchstaben eine Auswahl erscheinen mit den Länder, die es da gibt?
Oder willst du 2 Buchstaben eingeben und dann einen Button klicken und hoffen, dass es den Kürzel gibt und das Script einen Treffer findet?
Bei der ersten Wahl brauchst du ein keyevent was nach jeden Tastendruck in den Array schaut, ob es passende Treffer gibt.
Bei einem oder mehreren Treffern kannst du dann ja wieder ein Dropdown anzeigen, oder was im anderen Thema auch schon zur Sprache kam wäre dann eine Datenliste
 
<html>
<head>
<title>Gefahrgut</title>
</head>
<body style= "background-image:linear-gradient(360deg, #000028 0%, #009999 100%)"></body>
<style>
h1 {font-size:80}
h1 {color: white;}
h1 {margin-left: 50px}
h1 {margin-top: 10px}
h1 {text-shadow: rgb(0, 119, 255) 5px 5px 5px}
</style>
<h1>Gefahrgut L&aumlnderliste</h1>
<style>
.test {
font-size: 25px;
width: 160px;
height: 50px;

}
</style>
<form>
<input class="test" type="text" name="LK" id="kurz" list="LK"><button class="test">Leeren</button>
<datalist id="LK">
<option value="AR">
<option value="DE">
<option value="AU">
<option value="EC">
<option value="BH">
</datalist>
</form>
<div>
<div class="box right">
<div id="lang">
</div>
</div>
</div>

<style>
.box {
width: 70%;
margin-left: 0px;
border:1px solid black;
border-radius:10px;
height:150px;
padding:10px;
display:flex;
box-shadow:3px 3px 3px grey;
}
.right{
flex:2;
flex-direction:column;
border-right:2px solid rgb(255, 255, 255);
font-size: 50px;
color: rgb(255, 255, 255);
}
</style>
<script JavaScript>
var landertexte=[
['AR','Max. 8 Ger&aumlte in 2 Versandst&uumlcke (2x 4max.)<br>Gesamtgewicht 50Kg'],
['DE','Entweder nur 1 VS oder alle VS mit mind. 5 Ger&aumlte packen'],
['AU','Max. 8 Ger&aumlte in 2 Versandst&uumlcke (2x 4max.)<br>Gesamtgewicht 50Kg'],
['EC','Max. 8 Ger&aumlte in 2 Versandst&uumlcke (2x 4max.)<br>Gesamtgewicht 50Kg'],
['BH','Entweder nur 1 VS oder alle VS mit mind. 5 Ger&aumlte packen']];
lk=document.getElementById('kurz');
for(t=0;t<landertexte.length;t++){
lk.innerHTML+='<option value="'+landertexte[t][0]+'">'+landertexte[t][0]+'</option>';
}
lk.addEventListener('change',function(){
landertexte.filter(function(v,i) {
if(v[0]==lk.value){
document.getElementById('lang').innerHTML=v[1];
}
});
})

/*
var lander_code=['AF','AX','AL','DZ','AS','AD','AO','AI','AQ','AG','AR','AM','AW','AU','AT','AZ','BS','BH','BD','BB','BY','BE','BZ','BJ','BM','BT','BO','BQ','BA','BW','BV','BR','IO','VG','BN','BG','BF','BI','KH','CM','CA','CV','KY','CF','TD','CL','CN','CX','CC','CO','KM','CK','CR','HR','CU','CW','CY','CZ','CD','DK','DJ','DM','DO','TL','EC','EG','SV','GQ','ER','EE','ET','FK','FO','FJ','FI','FR','GF','PF','TF','GA','GM','GE','DE','GH','GI','GR','GL','GD','GP','GU','GT','GG','GN','GW','GY','HT','HM','HN','HK','HU','IS','IN','ID','IR','IQ','IE','IM','IL','IT','CI','JM','JP','JE','JO','KZ','KE','KI','XK','KW','KG','LA','LV','LB','LS','LR','LY','LI','LT','LU','MO','MK','MG','MW','MY','MV','ML','MT','MH','MQ','MR','MU','YT','MX','FM','MD','MC','MN','ME','MS','MA','MZ','MM','NA','NR','NP','NL','AN','NC','NZ','NI','NE','NG','NU','NF','KP','MP','NO','OM','PK','PW','PS','PA','PG','PY','PE','PH','PN','PL','PT','PR','QA','CG','RE','RO','RU','RW','BL','SH','KN','LC','MF','PM','VC','WS','SM','ST','SA','SN','RS','CS','SC','SL','SG','SX','SK','SI','SB','SO','ZA','GS','KR','SS','ES','LK','SD','SR','SJ','SZ','SE','CH','SY','TW','TJ','TZ','TH','TG','TK','TO','TT','TN','TR','TM','TC','TV','VI','UG','UA','AE','GB','US','UM','UY','UZ','VU','VA','VE','VN','WF','EH','YE','ZM','ZW']

*/
</script>




Info:
Datenlisten sieht gut aus, wäre toll wenn man A eingibt und dann schon Vorschlag kommt.

Ist der Code den ich jetzt soweit abgeändert habe. Problem was ich noch habe ist wenn man DE eingibt, auf ein leere Fläche klicken muss, um erst das auszulösen. Wenn man was eingibt und es nicht existiert bleibt der Eintrag, somit hab ich den leeren Button eingefügt.

Hoffe ist soweit verständlich.

Bedanke mich immer noch für die Hilfe. :)

Edit: den Code aktualisiert mit Datalist
 
Zuletzt bearbeitet:
Werbung:
Ich weiß nicht warum, aber Datalist finde ich jetzt nicht mehr gut.
Ich bekomme es auch nicht vernünftig hin das man beim click auf der Dataliste gleich ein Ergebniss angezeigt bekommt.
Das geht vieleicht ja noch , doch will ich eigentlich auch das die Suche startet wenn man das in den input Feld ein Tippt.

Das was du sagst das man erst irgendwo hinklicken muß kam mir auch noch in der query.
Ich muß da morgen mal genauer nach schauen weil irgendwie muß das ja gehen mit Datalist.

Wenn man sich selber eine Datalist erstellt ist das kein Problem.

Zur Lösung


Wenn das so mit Dataliste auch laufen würde wäre das gut.
Versuche das morgen nochmal, mit Datalist hinzubekommen, das muß sich ja irgendwie umsetzen lassen das es so lüuft wie das Beispiel hier.
 
Zuletzt bearbeitet:
Hallo Sempervivum,

wow Danke, klappt richtig gut und der Code ist um vielfaches kleiner.

Hab jetzt soweit alles angepasst. Läuft gut.

Kann man das x noch vergrößern?

Ansonsten vielen Dank für eure Hilfe. :smile:
 
Werbung:
Hallo zusammen,

ein Problem hab ich noch gefunden.

Ist auf 2 Unterschiedlich großen Monitoren, liegt der Fehler an den Monitor Einstellungen oder im kann man das im Script anpassen?

Gefahrgut 1.jpgGefahrgut 2.jpg
 
Du solltest mal deinen Code zeigen wie du es jetzt hast.
Dein problem kannst du in der Css einstellen.
Google mal nach @mediaqueries

Das X in Datalist wirst du wahrscheinlich nicht bearbeiten können, nur entfernen geht.
Da muß man was eine Liste bauen .
 
Zuletzt bearbeitet:
Code:
<html>
    <head>
        <title>Gefahrgut</title>
    </head>
    <body style= "background-image:linear-gradient(360deg, #000028 0%, #009999 100%)"></body>
<style>
    h1 {font-size:80}
    h1 {color: white;}
    h1 {margin-left: 50px}
    h1 {margin-top: 10px}
    h1 {text-shadow: rgb(0, 119, 255) 5px 5px 5px}
</style>
<h1>Gefahrgut L&aumlnderliste</h1>

<style>
    .test {
        font-size: 25px;
        width: 160px;
        height: 50px;
        
    }
</style>

<style>
    .label{
        font-size: 40px;
    }

</style>

<label>
    <input type="search" list="laender" class="label" placeholder="Länderkürzel">
    <datalist id="laender">
    </datalist>
    <div>
        <div class="box right">
          <div id="output">
          </div>
        </div>
      </div>
      
      
      <style>
      .box {
          width: 70%;
          margin-left: 0px;
          border:1px solid black;
          border-radius:10px;
          height:150px;
          padding:10px;
          display:flex;
          box-shadow:3px 3px 3px grey;
        }
        .right{
          flex:2;
          flex-direction:column;
          border-right:2px solid rgb(255, 255, 255);
          font-size: 50px;
          color: rgb(255, 255, 255);
          text-align: justify;
        }
      </style>
</label>
<script>
    const laendertexte = [
['AD', 'Entweder nur 1 VS oder alle VS mit mind. 5 Geräte packen'],
['AE', 'Entweder nur 1 VS oder alle VS mit mind. 5 Geräte packen'],
['AF', 'Entweder nur 1 VS oder alle VS mit mind. 5 Geräte packen'],
['AG', 'Entweder nur 1 VS oder alle VS mit mind. 5 Geräte packen'],
['AI', 'Max. 8 Geräte in 2 Versandstücke (2x 4max.), Gesamtgewicht 50Kg'],
['AL', 'Entweder nur 1 VS oder alle VS mit mind. 5 Geräte packen'],
['AM', 'Entweder nur 1 VS oder alle VS mit mind. 5 Geräte packen'],
['AN', 'Max. 8 Geräte in 2 Versandstücke (2x 4max.), Gesamtgewicht 50Kg'],
['AO', 'Max. 8 Geräte in 2 Versandstücke (2x 4max.), Gesamtgewicht 50Kg'],
['AR', 'Max. 8 Geräte in 2 Versandstücke (2x 4max.), Gesamtgewicht 50Kg'],
['AS', 'Max. 8 Geräte in 2 Versandstücke (2x 4max.), Gesamtgewicht 50Kg'],
['AT', 'Entweder nur 1 VS oder alle VS mit mind. 5 Geräte packen'],
['AU', 'Max. 8 Geräte in 2 Versandstücke (2x 4max.), Gesamtgewicht 50Kg'],
['AW', 'Max. 8 Geräte in 2 Versandstücke (2x 4max.), Gesamtgewicht 50Kg'],
['AZ', 'Max. 8 Geräte in 2 Versandstücke (2x 4max.), Gesamtgewicht 50Kg'],
['BA', 'Entweder nur 1 VS oder alle VS mit mind. 5 Geräte packen'],
['BB', 'Max. 8 Geräte in 2 Versandstücke (2x 4max.), Gesamtgewicht 50Kg'],
['BD', 'Max. 8 Geräte in 2 Versandstücke (2x 4max.), Gesamtgewicht 50Kg'],
['BE', 'Entweder nur 1 VS oder alle VS mit mind. 5 Geräte packen'],
['BF', 'Entweder nur 1 VS oder alle VS mit mind. 5 Geräte packen'],
['BG', 'Entweder nur 1 VS oder alle VS mit mind. 5 Geräte packen'],
['BH', 'Entweder nur 1 VS oder alle VS mit mind. 5 Geräte packen'],
['BI', 'Max. 8 Geräte in 2 Versandstücke (2x 4max.), Gesamtgewicht 50Kg'],
['BJ', 'Entweder nur 1 VS oder alle VS mit mind. 5 Geräte packen'],
['BL', 'Max. 8 Geräte in 2 Versandstücke (2x 4max.), Gesamtgewicht 50Kg'],
['BM', 'bitte ans Outbound oder Teamleiter wenden'],
['BN', 'Max. 8 Geräte in 2 Versandstücke (2x 4max.), Gesamtgewicht 50Kg'],
['BO', 'Max. 8 Geräte in 2 Versandstücke (2x 4max.), Gesamtgewicht 50Kg'],
['BQ', 'Max. 8 Geräte in 2 Versandstücke (2x 4max.), Gesamtgewicht 50Kg'],
['BR', 'Max. 8 Geräte in 2 Versandstücke (2x 4max.), Gesamtgewicht 50Kg'],
['BS', 'Entweder nur 1 VS oder alle VS mit mind. 5 Geräte packen'],
['BT', 'Max. 8 Geräte in 2 Versandstücke (2x 4max.), Gesamtgewicht 50Kg'],
['BW', 'Max. 8 Geräte in 2 Versandstücke (2x 4max.), Gesamtgewicht 50Kg'],
['BY', 'Entweder nur 1 VS oder alle VS mit mind. 5 Geräte packen'],
['BZ', 'Max. 8 Geräte in 2 Versandstücke (2x 4max.), Gesamtgewicht 50Kg'],
['CA', 'Max. 8 Geräte in 2 Versandstücke (2x 4max.), Gesamtgewicht 50Kg'],
['CD', 'Entweder nur 1 VS oder alle VS mit mind. 5 Geräte packen'],
['CF', 'Max. 8 Geräte in 2 Versandstücke (2x 4max.), Gesamtgewicht 50Kg'],
['CH', 'Entweder nur 1 VS oder alle VS mit mind. 5 Geräte packen'],
['CI', 'Entweder nur 1 VS oder alle VS mit mind. 5 Geräte packen'],
['CL', 'Max. 8 Geräte in 2 Versandstücke (2x 4max.), Gesamtgewicht 50Kg'],
['CM', 'Entweder nur 1 VS oder alle VS mit mind. 5 Geräte packen'],
['CN', 'bitte ans Outbound oder Teamleiter wenden'],
['CO', 'Max. 8 Geräte in 2 Versandstücke (2x 4max.), Gesamtgewicht 50Kg'],
['CR', 'Max. 8 Geräte in 2 Versandstücke (2x 4max.), Gesamtgewicht 50Kg'],
['SS', 'Max. 8 Geräte in 2 Versandstücke (2x 4max.), Gesamtgewicht 50Kg']]
    const liste = document.getElementById('laender'),
        inp = document.querySelector('input[type="search"]'),
        out = document.getElementById('output');
    inp.addEventListener('input', event => {
        const kuerzel = event.target.value.toUpperCase();
        event.target.value = kuerzel;
        if (kuerzel.length == 2,3) {
            let txt = '';
            laendertexte.some(item => {
                console.log('cyc')
                if (item[0] == kuerzel) {
                    txt = item[1];
                    return true;
                }
            });
            out.textContent = txt;
        }
    });
    laendertexte.forEach(item => {
        let opt = document.createElement('option');
        opt.textContent = item[0];
        liste.appendChild(opt);
    });
</script>
 
Werbung:
Du hast da einige Fehler in html und Css drinn, und etwas unordnung
Wie soll das eigentlich aussehen ?
Wie im ersten Beitrag , oder wie in beitrag 17# ?

Sowas &auml; , &ouml; usw ist blödsinn, benutze <meta charset="utf-8"> , dann kannst du ganz normal ä,ö usw nutzen
 
Zuletzt bearbeitet:
Zurück
Oben