입력에서 공백 포함하기

Question

내 사용자는 메시지를 입력 할 수있는 입력 필드를 원합니다.이 입력 필드는 페이지 전체에 스크롤링 선택 윤곽으로 표시됩니다. 그는 예를 들어 빈 공간을 포함 할 수

싶어 "종업원               찾아주십시오."

내 텍스트 영역에서 텍스트를 가져올 때 공백을 인식하지 못합니다. 그걸 얻으려면?

나는 이것이 이상한 요청이라는 것을 알고있다. 구글은 공백을 제거하는 법을 알려주고, 그것을 포함하지 않는다.

$('#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>

:

Answer 1

나는 모든 공백 값을 정확하게 얻고 있으며, 문제는 (아마도) 사용자 정의 div에 값을 표시하고 있다는 것을 확신합니다. 가장 좋은 방법은 white-space: pre을 (옵션에서 알 수 있듯이) pre이 공백을 제공하는 요소에 설정하는 것입니다. ;) 예 :

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

그리고 기본적으로 텍스트 내용을 수정하는 모든 &nbps; 제안을 무시합니다. CSS를 사용하면이 작업을 수행 할 수 있습니다.

Answer 2

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

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

당신은, 비 깨는 공간으로 정규 표현식으로 String.prototype.replace()을 사용하여 수행 할 수 있습니다  를 공백 문자로 변환해야필요합니다.그래서 첫 번째뿐만 아니라 모든 공백과 일치합니다 ( .replace(' '...)).

smajl의 제안은 덜 침략적이며 아마도 나을 것이라고 생각합니다.하지만 저는 이것을 후세에 남겨 둘 것입니다.

Answer 3

값의 공백이 무시되지 않습니다. 기본적으로 브라우저는 중복 된 공간을 "압축"합니다. 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>

편집을 사용하여 너무 늦게)