logo标签列表

使用JavaScript或jQuery获取文本区域的文本

javascriptjqueryhtmltextarea
55

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

<html>
<body>

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

</body>
</html>

我想获取父页面中文本区域的文本。我已经尝试了以下代码：

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

但是返回的是一个空字符串。然而，如果我在<textarea>标签中放置一个值，则可以成功返回该值：

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

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

1
这个 iframe 是否和父页面在同一个域名下？如果不是，出于安全原因，您不能访问存储在其他域名下的文档的 DOM，因此无需继续浪费时间。 - Darin Dimitrov
是的，这两个页面在同一个文件夹和同一个应用程序中。 - antoni
尝试使用文本而不是val或html： var text = $('#frame1').contents().find('#area1').text();，否则您需要调试并添加监视器并尝试各种操作... - Pierre
7个回答
90

读取 <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

在这里查看演示JSFiddle。

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

不应该使用jQuery的.html()和JavaScript的.innerHTML，因为它们不能捕捉到

20
从具有特定id的文本区域中获取值只需要执行以下操作：
$("#area1").val();

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

6
不要使用 html() 方法从文本域中获取值。应该使用 val() 方法，或者更好的方法是直接使用元素本身的 value 属性。 - Tim Down
6
@Diego：不，html（）是错误的。html（）返回文本区域的初始值，而不是当前值，因此一旦该值被更改（无论是通过脚本还是用户更改），它就是错误的。请参见http://jsfiddle.net/SdGGy/1/。 - Tim Down
@Tim Down：我一直使用.val，但认为它是相同的。感谢提供数据！ - Diego
当我将某些内容放在<textarea>Something</textarea>中时，两种方法都可以。 - antoni
我之前在使用textarea和tinymce所提供的所见即所得编辑器。这导致了一个冲突，因为我无法获取textarea中的文本。必须使用tinymce脚本中的javascript对象来检索文本。谢谢大家！ - antoni
8

使用JavaScript获取文本框中的文本：

<!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/

7
你可以使用 val() 方法。
var value = $('#area1').val();
$('#VAL_DISPLAY').html(value);
2

试试这个：

var info = document.getElementById("area1").value; // JavaScript
var info = $("#area1").val(); // jQuery
1
尝试使用.html()而不是.val():
var text = $('#frame1').contents().find('#area1').html();
6
不，html() 方法不能正确地获取文本域的值。请参见 @rahul 答案中的评论。 - Tim Down
1

正如Darin Dimitrov所说的, 如果它不是同一个域中的iframe，那就不可能实现。如果是，则检查 $（“＃frame1”）.contents（）是否返回所有内容，然后检查是否找到文本框：

$（“＃frame1”）.contents（）。find（“＃area1”）.length应该为1。

如果当您的

我可以访问文本区域标签中的对象和值。但我需要获取用户输入的值。 - antoni
当<textarea>标签中没有任何内容时，它会返回一个空字符串，即使我在文本区域中输入了内容。如果我在文本区域中输入了内容，并且<textarea>标签中有一个值，那么返回的是这个值，而不是我在文本区域中输入的内容。 - antoni
@antoni：我又编辑了一次我的答案。我觉得这样可以了。 - Diego
谢谢！我必须记住，我正在使用textarea和tinymce所提供的所见即所得编辑器。这会导致我的textarea与tinymce产生冲突，因为我无法获取文本。必须使用tinymce脚本中的javascript对象来检索文本。现在问题已经解决了。 谢谢大家！ - antoni
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接