Input = Text ausgeben

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

Senco Snifler

Neues Mitglied
3 September 2020
16
0
1
34
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
 

threadi

Moderator
Teammitglied
Moderator
20 Oktober 2006
15.381
304
83
Leipzig
www.comedy-news.de
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.
 

Senco Snifler

Neues Mitglied
3 September 2020
16
0
1
34
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:
 

threadi

Moderator
Teammitglied
Moderator
20 Oktober 2006
15.381
304
83
Leipzig
www.comedy-news.de
Nein, das ist schon eher individuell. Aber wenn Du dich etwas damit beschäftigst ist das lösbar.

Hier als Einstieg:
 
  • Like
Reaktionen: Senco Snifler

Senco Snifler

Neues Mitglied
3 September 2020
16
0
1
34
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:
 

Senco Snifler

Neues Mitglied
3 September 2020
16
0
1
34
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:
 

basti1012

Senior HTML'ler
26 November 2017
1.434
148
63
39
Minden
sebastian1012.bplaced.net
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
 

Senco Snifler

Neues Mitglied
3 September 2020
16
0
1
34
<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:

basti1012

Senior HTML'ler
26 November 2017
1.434
148
63
39
Minden
sebastian1012.bplaced.net
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.

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.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.074
404
83
67
Ich finde, das funktioniert sehr gut mit datalist:
Code:
    <label>
        Gib ein Länderkürzel ein:
        <input type="search" list="laender">
        <datalist id="laender">
        </datalist>
        <span id="output"></span>
    </label>
    <script>
        const laendertexte = [
            ['AF', 'Afghanistan'],
            ['AX', 'Åland'],
            ['AL', 'Albanien'],
            ['DZ', 'Algerien'],
// usw.
            ['ZW', 'Simbabwe']
        ];
        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) {
                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>
 
  • Like
Reaktionen: Senco Snifler

Senco Snifler

Neues Mitglied
3 September 2020
16
0
1
34
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:
 

Senco Snifler

Neues Mitglied
3 September 2020
16
0
1
34
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
 

basti1012

Senior HTML'ler
26 November 2017
1.434
148
63
39
Minden
sebastian1012.bplaced.net
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:

Senco Snifler

Neues Mitglied
3 September 2020
16
0
1
34
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>
 

Senco Snifler

Neues Mitglied
3 September 2020
16
0
1
34
Musste den Code etwas kürzen, sind mehr als 10.000 Buchstaben oder so. Hab nur die Länder jetzt weg gemacht.
 
Werbung:

Neueste Beiträge