Question

我正在使用C＃在ASP.NET中开发一个应用程序。我正在通过JQuery进行所有客户端操作。在我的页面中，我有一个html标签控件和html输入类型的文本控件。我必须向标签显示输入类型文本值。为此，我写了以下代码： HTML：

<input type='text' id='txtName'/>
<input type='button' id='btnDisplay' value='Display'/>
<p id='lblName'></p>

JQuery代码：

$("#btnDisplay").click(function(){
$("#lblName").html($("#txtName").val());

}）;

两个单词之间的单个空格正常工作。但如果写“abc xyz”，那么它只显示“abc xyz”。我必须显示输入类型的完全相同的文本。它应该显示“abc xyz”。

我该怎么做？请帮忙。 http://jsfiddle.net/shubhadeepchat/w19o8pot/

Answer 1

尝试使用

<pre id='lblName'></pre>

或者

<pre><p id='lblName'></p><pre>

DEMO

您还可以使用css

查看此解决方案

<!DOCTYPE html>
<html>
<head>
<style>
p {
    white-space: pre;
}
</style>
</head>
<body>

<p>
This       is some text. This is some text. This is some text.
</p>

</body>
</html>

Answer 2

正如A. Rama所说，HTML是有罪的。无论如何，你可以误导HTML用适当的HTML实体替换简单的空格（即 ）。在下面的示例中，正则表达式（replace的第一个参数）将搜索每个空格的出现并将其替换为实体（第二个参数）。

此解析为 fiddle 演示仅编辑JS并保留HTML原样：

$("#btnDisplay").click(function(){
    $("#lblName").html($("#txtName").val().replace(/\s/g,"&nbsp;"));
});

使用text()并不像我在fiddle中测试的那样有效（因为您无法使用p功能更新text()代码。

毕竟，即使text()有效，您也无法插入HTML标记作为输入，因为此标记不会被呈现。

Answer 3

试试这个：

Demo

#lblName {
    white-space: pre;
}

Answer 4

val函数正常工作。

但在HTML中，多个空格（即空格，制表符，返回等等）几乎总是显示为单个空格。

使用

$("#btnDisplay").click(function(){    
  alert($("#txtName").val());
});

你会看到所有白色空间。

Answer 5

使用text属性而不是html： -

$("#lblName").text($("#txtName").val());

使用CSS（来自@Mangesh）回答： -

#lblName {
    white-space: pre;
}

Answer 6

这是一个两步过程

第1步：

请勿使用.html

.html会将值作为html附加到标签中因此，请尝试使用.text()附加精确值

所以你应该使用

$("#lblName").text($("#txtName").val());

第2步：

使用<pre>代码

<input type='text' id='txtName'/>
<input type='button' id='btnDisplay' value='Display'/>
<pre><p id='lblName'></p></pre>

这是更新的小提琴

http://jsfiddle.net/w19o8pot/3/

如果您不执行第1步，那么您的功能将因以下输入而失败

<b> hi </b>

这个问题解释了与更多例子的区别

What is the difference between jQuery: text() and html() ?

Answer 7

如下所示使用JS函数，它将保留所有空格：

$("#btnDisplay").click(function(){    $("#lblName").html(encodeURIComponent($("#txtName").val()).replace(/%20/g,'&nbsp;'));
});

输入类型文本字段值不返回确切文本

7 个答案: