如何在iframe中键入输入时显示该输入 - How to display an input as it is being typed within an iframe?

How to display an input as it is being typed within an iframe?

本文关键字：输入显示 iframe | 更新日期: 2023-09-27

在iframe内的文本区域内编写文本时，我正试图显示文本。因此，它将像通过外部页面一样显示。

当前代码显示id为"div"的div中的输入。但我想把它显示在iframe中，这可能吗？

我当前的代码是：

<script language='javascript'>
  function hot(){
    document.getElementById("div").innerHTML=document.getElementById("text").value
  }
  window.onload = function() {hot();};
</script>
<textarea id="text" onKeyUp="hot();"></textarea>
<div id="div"></div>

<script type='text/javascript'>
  function hot(){
   window.frames['iframe'].document.body.innerHTML=document.getElementById("text").value
  }
</script>
<textarea id="text" onKeyUp="hot();"></textarea>
<iframe id = "iframe"></iframe>

http://jsfiddle.net/dD3R3/1/

根据这个问题的答案，下面的代码应该可以做到：

<textarea id="text">Type &lt;b&gt;HTML&lt;/b&gt; here...</textarea><br>
<iframe id="frame">

$( function () {
    var $text = $( '#text' );
    var doc   = $( '#frame' )[0].contentWindow.document;
    var $body = $( 'body', doc );
    var hot = function () {
        $body.html( $text.val() );
    };
    $text.keyup( hot );
    hot();
} );

下面是jsFiddle上上面代码的实时演示。

（我自由地使用了jQuery，因为你用它标记了你的问题，但如果你喜欢的话，把这段代码翻译回纯JavaScript应该不难。）