web-dev-qa-db-fra.com

Obtenir du texte textarea avec javascript ou jquery

J'ai un iframe qui contient un textarea, comme ceci:

<html>
<body>

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

</body>
</html>

Je veux obtenir le texte textarea dans la page parente. J'ai essayé ceci:

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

Mais une chaîne vide est retournée. Cependant, si je mets une valeur dans les tags, cette valeur est renvoyée avec succès:

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

Comment puis-je obtenir la valeur de la zone de texte à partir de la page contenant l'iframe?

javascriptjqueryhtmltextarea
40
antoni

LIRE le contenu de <textarea>:

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

ÉCRIRE au <textarea> ':

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

Voir DEMO JSFiddle ici.


Do not utilisez .html() ou .innerHTML!

les fonctions .html() de jQuery et .innerHTML de JavaScript ne doivent pas être utilisées, car elles ne prennent pas les modifications en compte dans le texte de la zone de texte.

Lorsque l'utilisateur tape sur la zone de texte, la fonction .html() ne renverra pas la valeur saisie, mais la version originale vérifiée ci-dessus pour un exemple.

61
acdcjunior

Pour obtenir la valeur d'une textarea avec un identifiant, il suffit de le faire.

Edité

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

Si vous avez plusieurs éléments avec le même identifiant dans le document, le code HTML n'est pas valide.

18
rahul

Vous pouvez utiliser val().

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

Obtenir du texte textarea avec 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
dearnotmine

Essayez .html () au lieu de .val ():

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

Comme @Darin Dimitrov l'a dit, si ce n'est pas un iframe sur le même domaine, ce n'est pas posible, si c'est le cas, vérifiez que $("#frame1").contents() renvoie tout ce qu'il devrait, puis vérifiez si la zone de texte est trouvée:

$("#frame1").contents().find("#area1").length devrait être 1.

Modifier

Si, lorsque votre zone de texte est "vide", une chaîne vide est renvoyée et que du texte a été saisi, le texte est renvoyé, il fonctionne parfaitement! Lorsque la zone de texte est vide , une chaîne vide est renvoyée!

Éditer 2 Ok. Ici, il y a un moyen, ce n’est pas très joli mais ça marche:

En dehors de l'iframe, vous accéderez à la zone de texte comme ceci:

window.textAreaInIframe

Et à l'intérieur de l'iframe (qui, je suppose, a jQuery) dans le document prêt, mettez ce code:

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

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

0
Webbu