1

ページ上にライブ HTML/CSS プレビューを作成したいと考えています。

ただし、コードは textareas を使用して提供されません。コードはページ ( div) で修正されます。

ユーザーがコードを変更できるようにして、それがライブ プレビュー ボックスに反映されるようにしたいです。スクリプト テキストの一部を変更できるページを作成しました (アマチュア向け)。ここでプレビューできます: http://apolosiskos.co.uk/HTML-CSS-EDITOR/index3.html

01)textareaを に置き換えると、ライブ プレビューが機能しませんdiv。

02)code HTML スクリプトでとxmpタグを使用しているため、テキストエリアを使用してもライブ プレビューが機能しません。

--> textarea では機能するが div では機能しないスニペット:

var wpcomment = document.getElementById('WPComment');

wpcomment.blur = wpcomment.onkeypress = function(){
    document.getElementById('prevCom').innerHTML = this.value;
}
#prevCom
{
  background:#124;
  color:#fff;
  min-width:20px;
  min-height:50px;
  font-size:25pt;
}
<textarea name="WPcomment" id="WPComment" placeholder="Add comments:">aaaaa</textarea>

<div id="prevCom"></div>

4

3 に答える 3

1

成功しませんでした。keyup を置き換えることができる他の addEventListener() メソッドはありますか?

はい、ぼかします

要素にキーダウン イベントを追加する場合<div>は、次の操作を実行できます。

まず、tabindex 属性を設定する必要があります。

<div id="a-div" tabindex="1" />

次に、(2) keydown にバインドします。

 $('#mydiv').bind('keydown', function(event) {
    //console.log(event.keyCode);
 });

div を最初から「フォーカス」したい場合:

$(function() {
   $('#mydiv').focus();
});
于 2016-10-20T14:49:22.810 に答える
0

プレビュー コードを関数内に配置する必要があります。ドキュメントが読み込まれたら、単純に呼び出すことができます。

https://jsfiddle.net/michaelvinall/4053oL1x/1/

Enter キーを押したときにプレビューのみがレンダリングされるという別の問題は、次のifステートメントが原因です。

if(e.which == 13 && $(this).val().length > 0)

e.which == 13内のはif、ユーザーが押したキーがエンター キー (コード 13) である場合にのみ、ブロック内のコードが実行されるように指定しています。各ステートメントのこの部分を削除することによりif、押されたキーはブロック内のコードを実行します。

if($(this).val().length > 0)
于 2016-10-20T14:51:21.740 に答える
0

キーアップがトリガーされたときに関数が呼び出されますが、ページの読み込み後は呼び出されません。

あなたはそれをしなければなりません：2つの異なるイベントが発生したときにそれらを呼び出す関数を定義します。

$(function() {
        function GetHtml(){
                var html = $('.html').val();
                return html;
            }

        function GetCss(){
                var Css = $('.css').val();
                return Css;
            }

        var previewRendering = function(){
                        console.log('kikou');
            var targetp = $('#previewTarget')[0].contentWindow.document;
            targetp.open();
            targetp.close();

          var html = GetHtml();
          var css = GetCss();

          $('body',targetp).append(html);
          $('head', targetp).append('<style>' + css + '</style>');

        };

        $('.innerbox').on("keyup",function(){
                previewRendering();
            });

        $(document).ready(function() {
            previewRendering();
        });

    });

load イベントは次の HTML タグのリストとのみ互換性があるため、このコードは機能しません: body、frame、iframe、img、input type="image"、link、script、style 

$('.innerbox').load(function()
于 2016-10-20T14:54:41.083 に答える