Leerzeichen von Eingabe einschließen

Question

Mein Benutzer möchte ein Eingabefeld, wo er eine Nachricht eingeben kann, die ich dann als Laufschrift über die Seite angezeigt werden. Er will in der Lage sein, leere Räume zu schließen, zum Beispiel

„Mitarbeiter               bitte nachschlagen.“

Mein Textfeld, wenn ich den Text bekomme, bemerkt nicht den Platz. Irgendeine Möglichkeit, das zu bekommen?

Ich weiß, das ist eine seltsame Anfrage - google sagt mir nur, wie man Leerzeichen entfernt, nicht enthalten.

var text = $('textarea').val();

<textarea class='messageInput'></textarea>

Answer 1

Ich bin mir ziemlich sicher, dass Sie den Wert mit allen Leerzeichen erhalten, das Problem liegt in der Anzeige des Wertes in Ihrem (wahrscheinlich) benutzerdefinierten div. Der beste Weg wäre, white-space: pre auf diesem Element zu setzen, das (wie die Option vorschlägt) pre Weißraum dienen wird. ;) Beispiel:

<div id="foo" style="white-space: pre"><!-- insert text here --></div> 

Und ignorieren alle &nbps; Vorschläge, die im Wesentlichen den Textinhalt modifizieren. CSS ist der richtige Weg!

Answer 2

Sie müssen Leerzeichen in geschützten Leerzeichen konvertieren,  , die unter Verwendung von String.prototype.replace() mit einem regulären Ausdruck durchgeführt werden kann:

$('#text').html($('textarea').val().replace(/ /g, '&nbsp'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea class='messageInput'>employees  hello</textarea> 
 
<p id="text"></p>

Sie benötigen / /g, damit alle Leerzeichen übereinstimmen, nicht nur das erste, was .replace(' '...) tun würde.

Beachten Sie, dass Smajls Vorschlag ist weniger invasiv und wahrscheinlich besser, aber ich werde dies für die Nachwelt verlassen.

Answer 3

Die Leerzeichen im Wert werden nicht ignoriert. Es ist, dass der Browser doppelte Räume standardmäßig "komprimiert". Verwenden white-space:pre;

<input type="text" id="input"> 
<button id="button"> 
    TEST 
</button> 
<div id="result"></div> 

document.getElementById("button").onclick = function() { 
 
    var content = document.getElementById("input").value; 
 
    console.log(content); 
 
    document.getElementById("result").innerHTML = content; 
 
}

#result { 
 
    white-space:pre; 
 
}

<input type="text" id="input"> 
 
<button id="button"> 
 
    TEST 
 
</button> 
 
<div id="result"></div>

EDIT: zu spät;)