输入类型文本字段值未返回确切文本答案

【问题标题】：input type text field value not returning exact text输入类型文本字段值未返回确切文本
【发布时间】：2014-12-17 10:10:52
【问题描述】：

我正在使用 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/

【问题讨论】：

这是一个两步的过程，看看我的回答你需要做这两个步骤
这不一定是一个两步过程。只需要用正确的 HTML 实体替换空格，正如我在答案中所示：D

标签： jquery html asp.net

【解决方案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>

【讨论】：

【解决方案2】：

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

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

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

text() 的使用不起作用，因为我在此 fiddle 中测试过（因为您无法使用 text() 函数更新 p 标记）。

毕竟，即使text() 可以工作，你也不能插入 HTML 标签作为输入，因为这个标签不会被渲染。

【讨论】：

没错！虽然您能否在 .replace() 的括号内解释更多关于正则表达式之类的事情。

【解决方案3】：

试试这个：

Demo

#lblName {
    white-space: pre;
}

【讨论】：

【解决方案4】：

这是一个两步过程

第 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() ?

【讨论】：

【解决方案5】：

val 函数工作正常。

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

使用

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

你会看到它们应该在的所有空白。

【讨论】：

忘记了右括号，但它可以正常工作。 jsfiddle.net/w19o8pot/4
但我们当然不想要弹出警告框！
这完全是另一个问题。 OP 询问 jQuery 和 input 没有返回正确文本的事实。他们是，这是他选择向他们展示不恰当的方式。我展示了这个。

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

使用text 属性而不是html：-

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

使用 CSS（取自 @Mangesh）答案：-

#lblName {
    white-space: pre;
}

【讨论】：

@marianoc84 - 好吧当时无法访问小提琴，所以无法正确理解 OP 的问题，但我认为应该使用 text 而不是 html。跨度>