[重要]どのように重要なのdivはのcontentEditable =カーソル位置への真のアクセス、およびカーソル位置に挿入コンテンツの内側にあります。フォーカス位置指定されたコンテンツを挿入します

 なぜのcontentEditableは=真のdiv内のカーソルがそれを得る必要がありますか?この記事https://blog.csdn.net/qq_33769914/article/details/85002918私たちは、あなたが、これは新しいコンテンツセグメントのhtmlコードであれば、コンテンツの新しいコンテンツを挿入したい知っているので。最後のショーのパターンがあります。だから、入力して、それを達成することができません。

したがって、我々はのcontentEditableの使用はdivの真=を検討してください。友人のHTML入力に問題はありません。
----------------
免責事項:この記事では、BY-SAの著作権契約CC 4.0に従って、」元の記事を再現したと考え、元のソースと、このリンクを添付してくださいCSDNのブロガー夏です声明。
オリジナルリンクします。https://blog.csdn.net/qq_33769914/article/details/93596502

<!DOCTYPE HTML>
<HTML>
<HEAD>
<METAのcharset = "UTF-8">
<タイトル>と指定されたコンテンツの焦点位置を取得するが焦点位置に挿入されている</ TITLE>
</ HEAD>

<身体>
 
の<divのcontentEditable = "true"をクラス= "fxAnswer" οnblur= "getblur()"> </ div>

<input type = "text" ID = "テキスト"プレースホルダ= " /あなたに追加したいコンテンツ">
<タイプ=上記のid = "BTN"上"ボタン"のボタン> </ button>を追加します。

<スクリプトタイプ= "テキスト/ JavaScriptを" SRC = "JS / jquery.min.js"> </ SCRIPT>
<スクリプトタイプ= "テキスト/ JavaScriptを">
    のvar SEL、レンジ;
    のvarのTextContent;
取得カーソル//がフォーカスを失いました位置
    関数getblur(){
       SEL = window.getSelection();    
       範囲= sel.getRangeAt(0);
       range.deleteContents();
    }

    複合式中// DIVのcontentEditable =焦点とコンテンツ取得インサート真位置
     insertHtmlAtCaret機能(HTML){
            IF(window.getSelection){
                // IE9および非居住
                IF(sel.getRangeAt && sel.rangeCount){
                    VAR EL document.createElement =( "DIV");
                    el.innerHTML = HTML;
                    VAR = document.createDocumentFragment FRAG()、ノード、lastNode;
                    一方((ノード= el.firstChild)){
                        lastNode = frag.appendChild(ノード);
                    }
                    range.insertNode(FRAG);
                    //選択保存
                    IF(lastNode)を{
                        range.cloneRange =レンジ();
                        range.setStartAfter(lastNode);
                        (真の)range.collapse;
                        sel.removeAllRanges();
                        sel.addRange(レンジ);
                    }
                }
            }そうIF(&& document.selectionをdocument.selection.type != "コントロール"){
                // IEの<9
                document.selection.createRange()pasteHTML(HTML);.
            }
            
            のTextContent = $( "fxAnswer。")HTML();. //これも非常に重要です。あなたは元の内容を記述していない場合はカバーが追加置き換える可能性があるため。あるいは単に表示されません。TextContentは、グローバル変数は、ユーザーの入力をされています。
    } 

デフォルトがフォーカスを取得していない場合は、//、あなたはエラーを指すことがあり、コンテンツを追加直接書き込むために行きます。彼はフォーカス機能を失うことに行きませんでしたので。SELと範囲がまだ定義されていません。これは、エラーになります。$(「fxAnswer。」)フォーカス()を追加;.デフォルトの文をので、彼はフォーカスがこのエラーを解決することができますになるだろうということ。

 

//この時間SELでフォーカスを失うことを、編集可能なdivの上の第1焦点に行っていないと範囲が割り当てられており、何の問題場合。
// $( "fxAnswer。")フォーカス();

$( "#1 BTN")をクリック(関数(){。
    のTextContent = $( "#テキスト")のval();
    insertHtmlAtCaret(のTextContent)
})
</スクリプト>


</ BODY>
</ HTML>


直接コードに。

その内容は、カーソルの入力位置に挿入されます。

あなたはトリガーを挿入したい内容を入力する前に、編集可能なdivがフォーカスイベントを失います。へのアクセス上のカーソル位置。あなたがコンテンツを挿入するとその後、直接それを失ったカーソルを置きます。だからここSELと範囲はグローバル変数です。SELと範囲が定義されると、フォーカスを失った、直接にこの機能をinsertHtmlAtCaret。
----------------
免責事項:この記事では、BY-SAの著作権契約CC 4.0に従って、」元の記事を再現したと考え、元のソースと、このリンクを添付してくださいCSDNのブロガー夏です声明。
オリジナルリンクします。https://blog.csdn.net/qq_33769914/article/details/93596502

 

おすすめ

転載: www.cnblogs.com/BluceLee/p/12099981.html