如何使用 jQuery 和另一个文本框在文本框中显示文本？答案

【问题标题】：How to display text in a textbox using jQuery and another textbox?如何使用 jQuery 和另一个文本框在文本框中显示文本？
【发布时间】：2011-09-21 16:57:31
【问题描述】：

我有一个表单，其中包含三个字段：Title、Slug 和 URL。

我有一个插件，可以将标题字段中输入的文本转换为 slug。（例如，如果我输入“Joe Bloggs Goes On Holiday”，那么在 slug 字段中将显示为“joe-bloggs-goes-on-holiday”）。

我现在需要做的是获取 slug 字段中的信息并将其添加到我的 URL 字段中。在 URL 字段中，已经有文本（通常是“/mainpage/”，但这取决于正在创建的页面类型）。因此，在 URL 字段中，我将拥有“/mainpage/joe-bloggs-goes-on-holiday”。

我怎样才能做到这一点？

干杯

【问题讨论】：

【解决方案1】：

您可以使用.val方法来获取和设置字段的值：

var urlField = $("#urlField");
urlField.val(urlField.val() + $("#slugField").val());

【讨论】：

这可行，但必须添加另一个包含前导码“/mainpage/”的变量。所以在我的中，我添加了 var mainpageField = $("urlField").val("/mainpage/");，然后你有第二个 urlField.val() 我用 mainpageField.val() 替换了它。谢谢你:)

【解决方案2】：

您可以使用 jQuery 追加或连接值：

以前的

$('textarea').append($('slug').val());

后者

$('textfield').val($('textfield').val + $('slug').val());

【讨论】：

这些都不行。首先，append 用于向元素添加内容，它不会附加到字符串。其次，第二个示例中的 this 不太可能是您期望的文本字段。
您对this 的看法是正确的，这是一个错误，已修复。假设他正在使用 textarea 并尝试添加到内容中，第一个将起作用。
同意。我读到的问题是input type="text" 而不是textarea，但不是很清楚。
James：请注意，如果您像这样编写代码，则可以使用它：('textfield').val(function() { return $(this).val + $('slug').val(); });。

【解决方案3】：

使用jQuery's val() method。

HTML

Slug: <input id="slug" value="joe-bloggs-goes-on-holiday" /><br />
URL: <input id="url" value="/mainpage/" /><br />
Result: <input id="result" />

JavaScript

var $urlObj = $("#url");
$("#result").val($urlObj.val() + $("#slug").val());

【讨论】：