简体   繁体   English

使用 javascript 或 Jquery 获取 textarea 文本

[英]Get textarea text with javascript or Jquery

I have an iframe that contains a textarea, like so:我有一个包含文本区域的 iframe,如下所示:

<html>
<body>

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

</body>
</html>

I want to get the textarea text in the parent page.我想在父页面中获取 textarea 文本。 I've tried this:我试过这个:

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

But an empty string is returned.但是会返回一个空字符串。 However if I put a value within tags this value is returned successfully:但是,如果我在标签中放置一个值,则该值将成功返回:

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

How can I get the value of the textarea from the page which contains the iframe?如何从包含 iframe 的页面中获取 textarea 的值?

READING the <textarea> 's content:阅读<textarea>的内容:

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

WRITING to the <textarea> ':写入<textarea> ':

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

See DEMO JSFiddle here.在此处查看演示 JSFiddle。


Do not use .html() or .innerHTML !不要使用.html().innerHTML

jQuery's .html() and JavaScript's .innerHTML should not be used, as they do not pick up changes to the textarea's text.不应使用 jQuery 的.html()和 JavaScript 的.innerHTML ,因为它们不会获取对 textarea 文本的更改

When the user types on the textarea, the .html() won't return the typed value, but the original one -- check demo fiddle above for an example.当用户在 textarea 上键入时, .html()不会返回键入的值,而是返回原始值——查看上面的演示小提琴示例。

To get the value from a textarea with an id you just have to do要从带有 id 的 textarea 中获取值,您只需要做

Edited已编辑

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

If you are having more than one element with the same id in the document then the HTML is invalid.如果文档中有多个具有相同 id 的元素,则 HTML 无效。

Get textarea text with JavaScript:使用 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/ http://jsfiddle.net/PUpeJ/3/

You could use val() .你可以使用val()

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

%100 Solution: $('textarea[name="areaname"]').val() %100 解决方案:$('textarea[name="areaname"]').val()

Try.html() instead of.val():尝试.html() 而不是.val():

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

As @Darin Dimitrov said, if it is not an iframe on the same domain it is not posible, if it is, check that $("#frame1").contents() returns all it should, and then check if the textbox is found:正如@Darin Dimitrov 所说,如果它不是同一域上的 iframe 是不可能的,如果是,请检查$("#frame1").contents()是否返回它应该返回的所有内容,然后检查文本框是否成立:

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

Edit编辑

If when your textarea is "empty" an empty string is returned and when it has some text entered that text is returned, then it is working perfect!!如果当您的 textarea 为“空”时返回一个空字符串,并且当它输入了一些文本时返回该文本,那么它工作完美! When the textarea is empty , an empty string is returned!当 textarea 为时,返回一个字符串!

Edit 2 Ok.编辑 2好的。 Here there is one way, it is not very pretty but it works:这里有一种方法,它不是很漂亮,但它有效:

Outside the iframe you will access the textarea like this:在 iframe 之外,您将像这样访问文本区域:

window.textAreaInIframe

And inside the iframe (which I assume has jQuery) in the document ready put this code:在 iframe(我假设它有 jQuery)中准备好文档中的代码:

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

Try This:尝试这个:

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM