输入类型文本字段值未返回确切文本
Posted
技术标签:
【中文标题】输入类型文本字段值未返回确切文本【英文标题】：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 【参考方案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," "));
);
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,' '));
);
【讨论】：
【参考方案7】：使用text 属性而不是html：-
$("#lblName").text($("#txtName").val());
使用 CSS（取自 @Mangesh）答案：-
#lblName
white-space: pre;
【讨论】：
@marianoc84 - 好吧当时无法访问小提琴，所以无法正确理解 OP 的问题，但我认为应该使用text 而不是 html。跨度>
以上是关于输入类型文本字段值未返回确切文本的主要内容，如果未能解决你的问题，请参考以下文章