it-swarm.com.de

Holen Sie sich Textbereich mit Javascript oder Jquery

Ich habe einen iframe, der einen Textbereich enthält:

<html>
<body>

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

</body>
</html>

Ich möchte den Textbereich auf der übergeordneten Seite anzeigen. Ich habe das probiert:

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

Es wird jedoch eine leere Zeichenfolge zurückgegeben. Wenn ich jedoch einen Wert in Tags stecke, wird dieser Wert erfolgreich zurückgegeben:

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

Wie kann ich den Wert des Textbereichs von der Seite erhalten, die den iframe enthält?

40
antoni

LESEN des Inhalts des <textarea>:

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

SCHREIBEN an den <textarea> ':

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

Siehe DEMO JSFiddle hier.


Verwenden Sie not nicht .html() oder .innerHTML!

.html() von jQuery und .innerHTML von JavaScript sollten nicht verwendet werden, da sie Änderungen nicht übernehmen im Textbereich der Textarea übernehmen.

Wenn der Benutzer in das Textfeld eintippt, gibt .html() nicht den eingegebenen Wert zurück, sondern den ursprünglichen Wert - überprüfen Sie die Demo-Geige oben für ein Beispiel.

61
acdcjunior

Um den Wert aus einem Textbereich mit einer ID zu erhalten, müssen Sie dies nur tun

bearbeitet

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

Wenn Sie mehr als ein Element mit derselben ID im Dokument haben, ist der HTML-Code ungültig.

18
rahul

Sie könnten val() verwenden.

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

Textbereich mit JavaScript abrufen:

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

Versuchen Sie es mit .html () anstelle von .val ():

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

Wie @Darin Dimitrov sagte, wenn es sich nicht um einen iframe in derselben Domain handelt, ist dies nicht möglich. Wenn dies der Fall ist, prüfen Sie, ob $("#frame1").contents() alles zurückgibt, was es sollte, und dann prüfen, ob das Textfeld gefunden wird:

$("#frame1").contents().find("#area1").length sollte 1 sein.

Bearbeiten

Wenn Ihr Textbereich "leer" ist, wird eine leere Zeichenfolge zurückgegeben, und wenn Text eingegeben wurde, wird der Text zurückgegeben. Wenn der Textbereich empty ist, wird ein empty - String zurückgegeben!

Editiere 2 Ok. Hier gibt es einen Weg, es ist nicht sehr hübsch, aber es funktioniert:

Außerhalb des Iframes gelangen Sie wie folgt in den Textbereich:

window.textAreaInIframe

Und innerhalb des iframe (von dem ich annehme, dass es jQuery hat) im Dokument bereit, fügen Sie diesen Code ein:

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

% 100 Lösung: $ ('textarea [name = "areaname"]'). Val ()

0
Webbu