Получить текст textarea с помощью javascript или JQuery

У меня есть 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>

Как я могу получить значение textarea со страницы, содержащей iframe?

Ответ 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

Смотрите здесь DEMO JSFiddle.

Не используйте `.html()` или `.innerHTML`!

jQuery .html() и JavaScript .innerHTML не должны использоваться, поскольку они не подбирают изменения в текст textarea.

Когда пользователь набирает текст в текстовом поле, .html() не вернет введенное значение, но исходное - проверьте демонстрационную скрипту выше для примера.

Ответ 2

Чтобы получить значение из текстового поля с идентификатором, вам просто нужно сделать

Edited

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

Если у вас есть более одного элемента с тем же идентификатором в документе, то HTML недействителен.

Ответ 3

Вы можете использовать val().

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

Ответ 4

Получить текст textarea с 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/

Ответ 5

HTML:

<html>
  <body>
    <textarea id="mytext"></textarea>
  <body>
</html>

JQuery

var myText = $("#mytext").val();

Обычный JavaScript:

var myText = document.getElementById('mytext').value;

Ответ 6

Попробуйте использовать .html() вместо .val():

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

Ответ 7

Как сказал @Darin Dimitrov, если он не является iframe в том же домене, он невозможен, если это так, убедитесь, что $("#frame1").contents() возвращает все, что ему нужно, а затем проверить, найдено ли текстовое поле:

$("#frame1").contents().find("#area1").length должно быть 1.

Edit

Если, когда ваша текстовая область "пуста", возвращается пустая строка, и когда у нее есть какой-то текст, введенный текст возвращается, тогда он работает отлично! Когда текстовое поле пусто, возвращается строка empty!

Изменить 2 ОК. Здесь есть один способ, это не очень красиво, но он работает:

За пределами iframe вы получите доступ к текстовому пространству следующим образом:

window.textAreaInIframe

И внутри iframe (который, как я предполагаю, имеет jQuery) в документе готов поставить этот код:

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