0 Daumen
1,9k Aufrufe

Ich möchte in meine Website integrieren, dass der Besucher seinen Namen in ein Textfeld eingibt und dann der Text "Hallo <Nutzer>!" auf der Seite erscheint (nicht als Alert-Box oder in einer neuen Seite, sondern im HTML). Der Text soll dabei sehr groß dargestellt werden. Wie geht man da vor?

Avatar von

2 Antworten

+2 Daumen
 
Beste Antwort

Hi!

Z.B. so:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<style>
    #user_output{font-size:300pt; text-align: center;}
</style>

<script>
    function PostUser()
    {
        var user = document.getElementById("username").value;
        var output = document.getElementById("user_output");
        output.innerHTML = "Hallo " + user + " !";
    }
</script>
</head>

<body>
    <input type="text" id = "username">
    <button onclick="PostUser()">Nutzer einlesen</button>
    <div id="user_output"><!-- Hier wird der Benutzername ausgegeben --></div>
</body>
</html>
Grüße
Avatar von

Hab noch nicht herausgefunden, wie man hier den Code formatieren kann.

Das geht über diesen Button

sdjhfgb.png

Sehr schön! Aber nur für Programmiercode. 

Sind in der Stacklounge keine Sonderzeichen wie unter Omega in der Mathelounge möglich? 

"Das geht über diesen Button"

Danke @André.

Doof ist aber, dass Leerzeichen und Tabulatoren einfach herausgefiltert werden und dass man keine Tabulatoren im Eingabefeld setzen kann.

Doof ist aber, dass Leerzeichen und Tabulatoren einfach herausgefiltert werden und dass man keine Tabulatoren im Eingabefeld setzen kann.

Das ist leider auch im "nomalen" Editor doof. 

Kai hatte da mal andere ästhetische Vorstellungen. Oder vielleicht gab Konflikte mit der Funktionalität des Editors (?) 

Das Filtern ist kein Filtern. Leerzeichen in HTML werden nicht als Leerzeichen dargestellt. Man benötigt dazu 

&nbsp;

Wenn ihr mehrere Leerzeichen habt " . . . " wird diese jeder Browser als nur ein Leerzeichen darstellen " ".

Ich werde versuchen, einen Weg zu finden, die &nbsp; automatisch beim eingefügten Text zu setzen. Das ist aber komplex.

Eine andere Alternative wäre die Nutzung eines Markdown-Editors, die aber sehr gewöhnungsbedürftig sind. Dafür wird dort Reintext verwendet und jedes Leerzeichen ist gültig.

Ich stimme Kai zu ... das ist technisch alles andere als trivial. Meine Idee (insbesondere für den Code): Einhängen einer JS-Funktion in den Post-Button, der den Content des Editors nimmt, sprachspezifisch modifiziert und an Backend übergibt. Lasst uns gerne darüber diskutieren. Das sähe dann (vollautomatisiert) in etwa so aus:

sdjhfgsadhfgasjhfdhafgjhafzjasgfjzhagsf.png

Man beachte die Scroll-Bar am Ende, die Einrückung und das sprachspezifische Code-Coloring. Außerdem könnte man durch eine Checkbox auswählen, ob die Zeilennummern angezeigt werden oder nicht. Das Design kann natürlich nach Belieben angepasst werden! 

Das würde uns auch noch einmal zusätzlich von StackOverflow abheben und ist für den Anwender trivial :-)

Meinungen?

Wie ich sehe, wurde das Side-Scrolling Problem bereits gelöst :-)

Ich habe das CSS vorhin geupdatet. Mit white-space:pre; sollten nun Leerzeichen beim Copy und Paste in einen Code-Block bestehen bleiben.

Test:

code {
    display: block;
    background: #EEE;
    padding: 10px;
    margin: 10px 0;
white-space: pre;
line-height: 150%;
}
Die letzten beiden Zeilen hatten einen Tabsprung. Dieser wird in ein Leerzeichen umgewandelt.

@André: 1. So ein Parser ist meines Erachtens Overkill. 2. Welches "Side-Scrolling Problem"? Meinst du vielleicht horizontales Scrollen des Codes im Codeblock?

Langer Codeblock zum Test des Scrollbalkens: <link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/solarized_dark.min.css' rel='stylesheet'/>

Hier ein Post zur Diskussion der Editorfunktionen: https://www.stacklounge.de/1045

Welches "Side-Scrolling Problem"? Meinst du vielleicht horizontales Scrollen des Codes im Codeblock?

Ja, genau das meine ich :-)

Mit white-space:pre; sollten nun Leerzeichen...

Muss man das jedes mal eingeben? Und wie oft? 

sollten nun Leerzeichen beim Copy und Paste in einen Code-Block bestehen bleiben.

Ja, das klappt jetzt, super!

Ja, das klappt jetzt, super!

Dem kann ich nur zustimmen! Gute Arbeit \(\ddot\smile\)

+3 Daumen

Hier benötigst Du Komponenten im HTML- und Script-Bereich. Zunächst einmal muss der Nutzer die Möglichkeit haben seinen Namen einzugeben. Dafür eignet sich ein Input-Field:

<input type="text" id="name">

Die id benötigst Du zur späteren Referenzierung. Um den Text in der HTML-Seite einzubetten, benötigst Du ein DIV, das Du im Skript über die id ansprechen kannst.

<div style="font-size:20px;" id="output"></div>

Mit dem Style-Attribut kannst Du die Darstellung des Textes auf der Seite gestalten. Hier wurde die Schriftgröße auf 20 Pixel hochskaliert.

Wir definieren nun eine Funktion, die den gewünschten Text im HTML-DIV platziert:

function show_text(){
var name = document.getElementById("name").value;
  var output = document.getElementById("output");
  var html = "Hallo " + name + "!";
  output.innerHTML = html;
}

Zuerst holen wir uns den vom Besucher eingegebenen Namen über 

var name = document.getElementById("name").value;

Mit 

var output = document.getElementById("output");
speicherst Du das Output-DIV in einer Variable. In der darauffolgenden Zeile baust Du Dir den gewünschten Ausgabetext zusammen und weist diesen dem Attribut innerHTML des in der Variable ouput gespeicherten Output-DIVs zu.
output.innerHTML = html;
Das dazugehörige JSFiddle findest Du hier:
https://jsfiddle.net/hqg94z8d/14/
Avatar von

Ein anderes Problem?

Stell deine Frage