0

When you embed a movie from youtube, you have the opportunity to change the width and height of the iframe element. When you type in your desired values, you see that the html code inside the texarea is changed so the user can just copy paste.

How do you make this happen?

This is what I tried:

<input type="text" id="width">

<textarea id="code">
    <iframe src="..." width="224" height="144" frameborder="0" id="embed-widget"></iframe>
</textarea>

<script>
$(function() {
    $('#width').keyup(function(){
        var new_width = $(this).val();
        $('#embed-widget').attr('width',new_width);
    });
});

This don't work inside the textarea, but the exact same code work on the iframe element itself on the page (when I put the id on to it)

Also, is there a easy way to make the whole text marked when the user clicks the text area?

4

1 回答 1

0

the iframe element inside the text area is not reachable, it is not real, try logging $("#embed-widget") and you will get an empty array.... what you need to do is after changing the width of the iframe element, get html and set the textarea text to that html

$("#myiframe").width(new_width);
$("mytexteare").val($("#myiframe").parent().html());// make sure a parent div contains the iframe only

the other way is to just find the "width" and replace it, like using substring and indexOf of string, or you can have the iframe text as a value of a hidden input, with a {0} in place of width attribute, so u can grab anytime, and perform a replace, then paste in textarea

于 2012-11-07T09:39:24.490 回答