使用 javascript 或 Jquery 获取 textarea 文本
Posted
技术标签:
【中文标题】使用 javascript 或 Jquery 获取 textarea 文本【英文标题】：Get textarea text with javascript or Jquery 【发布时间】：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 或 htmlvar text = $('#frame1').contents().find('#area1').text(); ，否则。您需要调试和添加手表并尝试各种事情......
【参考方案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，但认为它是一样的。感谢您的数据！
当我在 中放一些东西时，两种方式都可以
我将 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 标签中输入的值。但我需要获取用户输入的值。 没有。当 @antoni：我再次编辑了我的答案。我认为这样就可以了。 谢谢！！我必须记住，我将 textarea 与 tinymce 所见即所得编辑器一起使用。这会导致与我的文本区域发生冲突，因为我无法获取文本。必须使用 tinymce 脚本中的 javascript 对象检索文本。所以，现在解决了。谢谢大家！【参考方案7】：试试这个：
var info = document.getElementById("area1").value; // Javascript
var info = $("#area1").val(); // jQuery
【讨论】：
以上是关于使用 javascript 或 Jquery 获取 textarea 文本的主要内容，如果未能解决你的问题，请参考以下文章
使用 JavaScript 或 jQuery 获取当前月份的第一个和最后一个日期 [重复]
使用 jQuery 或 Javascript 获取括号内的字符串
如何使用 javascript 或 jquery 仅从字符串中获取所有 HTML 标记？ [关闭]
如何使用 Javascript 或 Jquery 获取网页图标/ Apple 触摸图标和标题？