【问题标题】：Get textarea text with javascript or Jquery使用 javascript 或 Jquery 获取 textarea 文本
【发布时间】：2011-08-15 10:36:54
【问题描述】：

我有一个包含 textarea 的 iframe，如下所示：

<html>
<body>

<form id="form1">
<div>
    <textarea id="area1" rows="15"></textarea>
</div>
</form>

</body>
</html>

我想获取父页面中的 textarea 文本。我试过这个：

var text = $('#frame1').contents().find('#area1').val();

但是返回一个空字符串。但是，如果我在标签中放置一个值，则该值将成功返回：

<textarea id="area1" rows="15">something</textarea>

如何从包含 iframe 的页面中获取 textarea 的值？

【问题讨论】：

这个 iframe 是否与父页面在同一个域中？如果没有，则无需继续浪费您的时间，因为出于安全原因，您无法访问未存储在您的域中的文档的 DOM。
是的，两个页面都在同一个文件夹和同一个应用程序上。
尝试 text 而不是 val 或 html var text = $('#frame1').contents().find('#area1').text(); ，否则。您需要调试和添加手表并尝试各种事情......

标签： javascript jquery html textarea

【解决方案1】：

阅读`<textarea>`的内容：

var text1 = document.getElementById('myTextArea').value;     // plain JavaScript
var text2 = $("#myTextArea").val();                          // jQuery

写信给`<textarea>`'：

document.getElementById('myTextArea').value = 'new value';   // plain JavaScript
$("#myTextArea").val('new value');                           // jQuery

See DEMO JSFiddle here.

不要不要使用`.html()`或`.innerHTML`！

不应使用 jQuery 的 .html() 和 JavaScript 的 .innerHTML，因为它们不会获取文本区域文本的更改。

当用户在 textarea 上键入时，.html() 不会返回键入的值，而是返回原始值——查看上面的演示小提琴示例。

【讨论】：

【解决方案2】：

要从带有 id 的 textarea 中获取值，您只需要这样做

已编辑

$("#area1").val();

如果文档中有多个具有相同 id 的元素，则 HTML 无效。

【讨论】：

没有。不要使用html() 从文本区域获取值。使用val()，甚至更好的是元素本身的value 属性。
@Diego：不，html() 是错误的。 html() 返回 textarea 的初始值，而不是当前值，因此一旦更改值（通过脚本或用户），它就是错误的。见jsfiddle.net/SdGGy/1
@Tim Down：我一直使用 .val，但认为它是一样的。感谢您的数据！
当我在 Something 中放一些东西时，两种方式都可以
我将 textarea 与 tinymce 所见即所得编辑器一起使用。这会导致与我的文本区域发生冲突，因为我无法获取文本。必须使用 tinymce 脚本中的 javascript 对象检索文本。谢谢大家！

【解决方案3】：

你可以使用val()。

var value = $('#area1').val();
$('#VAL_DISPLAY').html(value);

【讨论】：

【解决方案4】：

使用 JavaScript 获取 textarea 文本：

<!DOCTYPE html>
<body>
<form id="form1">
    <div>
        <textarea id="area1" rows="5">Yes</textarea>
        <input type="button" value="get txt" onclick="go()" />
        <br />
        <p id="as">Now what</p>
    </div>
</form>
</body>

function go() {
    var c1 = document.getElementById('area1').value;
    var d1 = document.getElementById('as');
    d1.innerHTML = c1;
}

http://jsfiddle.net/PUpeJ/3/

【讨论】：

【解决方案5】：

尝试 .html() 而不是 .val() ：

var text = $('#frame1').contents().find('#area1').html();

【讨论】：

否，html() 无法正常工作以查找文本区域的值。请参阅@rahul 的答案中的 cmets。

【解决方案6】：

正如@Darin Dimitrov 所说，如果它不是同一域上的 iframe，则不可能，如果是，请检查 $("#frame1").contents() 是否返回它应该返回的所有内容，然后检查是否找到文本框：

$("#frame1").contents().find("#area1").length 应该是 1。

编辑

如果当您的文本区域为“空”时返回一个空字符串，并且当它输入了一些文本时返回该文本，那么它工作完美！当 textarea 为 empty 时，返回一个 empty 字符串！

编辑 2 好的。这里有一种方法，它不是很漂亮，但很有效：

在 iframe 之外，您将像这样访问 textarea：

window.textAreaInIframe

在文档中的 iframe（我假设它有 jQuery）内准备好放置以下代码：

$("#area1").change(function() {
    window.parent.textAreaInIframe = $(this).val();
}).trigger("change");

【讨论】：

我可以访问对象和在 textarea 标签中输入的值。但我需要获取用户输入的值。
没有。当标签中没有任何内容时，即使我在文本区域中输入内容，它也会返回一个空字符串。如果我在文本区域中输入内容并且 <textarea> 标记中有一个值，则返回此值，而不是输入到 textarea 中的值。
@antoni：我再次编辑了我的答案。我认为这样就可以了。
谢谢！！我必须记住，我将 textarea 与 tinymce 所见即所得编辑器一起使用。这会导致与我的文本区域发生冲突，因为我无法获取文本。必须使用 tinymce 脚本中的 javascript 对象检索文本。所以，现在解决了。谢谢大家！

【解决方案7】：

试试这个：

var info = document.getElementById("area1").value; // Javascript
var info = $("#area1").val(); // jQuery

【讨论】：

阅读&lt;textarea&gt;的内容：

写信给&lt;textarea&gt;'：

不要不要使用.html()或.innerHTML！

阅读`<textarea>`的内容：

写信给`<textarea>`'：

不要不要使用`.html()`或`.innerHTML`！