Question

我的用户想要一个输入字段，在那里他可以输入一条消息，然后我将在页面上显示为滚动字幕。他希望能够包含空格，例如，

“员工请抬头。”

我的文本区域，当我收到文本时，没有注意到空格。有什么办法吗？

我知道这是一个奇怪的请求 - 谷歌只告诉我如何删除空格，不包括它。

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

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

Answer 1

我很确定你正在获得所有空格正确的值，问题在于显示你的（可能）自定义div中的值。最好的方法是在该元素上设置white-space: pre（如选项所示）将pre提供白色空间。 ;）示例：

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

并忽略所有基本上修改文本内容的&nbps;建议。 CSS是正确的方法！

Answer 2

您需要将空格字符转换为不间断的空格 ，这可以使用带有正则表达式的String.prototype.replace()来完成：

＆＃13;

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

＆＃13;

<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>

＆＃13;

您需要/ /g才能匹配所有空格，而不仅仅是.replace(' '...)将会执行的第一个空格。

请注意，smajl的建议是侵入性更小，可能更好，但我会留给后人。

Answer 3

不会忽略值中的空格。这是默认情况下浏览器＆＃34;压缩＆＃34;重复的空格。使用white-space:pre;

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

＆＃13;

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

＆＃13;

#result {
  white-space:pre;
}

＆＃13;

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

＆＃13;

编辑：太晚了;）

从输入中包含空格

3 个答案: