web-dev-qa-db-ja.com

javascriptまたはJqueryでテキストエリアのテキストを取得する

次のように、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 id="area1" rows="15">something</textarea>

Iframeを含むページからtextareaの値を取得するにはどうすればよいですか？

javascriptjqueryhtmltextarea
41
antoni

_<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を参照してください。


not.html()または_.innerHTML_を使用しないでください！

jQueryの.html()およびJavaScriptの_.innerHTML_は、textareaのテキストに対して変更を取得しないであるため、使用しないでください。

ユーザーがテキストエリアに入力すると、.html()は入力された値を返しませんが、元の値を返します。例については上記のデモフィドルを確認してください。

64
acdcjunior

IDを持つテキストエリアから値を取得するには、あなたがする必要があります

編集済み

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

ドキュメントに同じIDを持つ複数の要素がある場合、HTMLは無効です。

18
rahul

val()を使用できます。

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

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
dearnotmine

.val（）の代わりに.html（）を試してください：

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

@Darin Dimitrovが言ったように、同じドメインのiframeでない場合は不可能です。可能であれば、$("#frame1").contents()がすべてを返すことを確認し、テキストボックスが見つかったかどうかを確認します。

$("#frame1").contents().find("#area1").lengthは1でなければなりません。

編集

テキストエリアが「空」のときに空の文字列が返され、テキストが入力されたときにそのテキストが返される場合、完璧に機能しています!! textareaがemptyの場合、empty文字列が返されます！

編集2 OK。ここに1つの方法があります、それは非常にきれいではありませんが、動作します：

Iframeの外部では、次のようにtextareaにアクセスします。

window.textAreaInIframe

そして、iframe（私はjQueryを持っていると思います）の中に、次のコードを用意します：

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

％100ソリューション：$（ 'textarea [name = "areaname"]'）。val（）

1
Webbu