contenteditableエンティティの最後にカーソルを移動する方法


83

contenteditableGmailのメモウィジェットのように、キャレットをノードの最後に移動する必要があります。

StackOverflowでスレッドを読みましたが、これらのソリューションは入力の使用に基づいており、contenteditable要素では機能しません。

回答:


27

別の問題もあります。

ニコ・バーンズ場合の解決策は、作品contenteditableのdivが他のmultilinedの要素が含まれていません。

たとえば、divに他のdivが含まれていて、これらの他のdivに他のものが含まれている場合、いくつかの問題が発生する可能性があります。

それらを解決するために、私は次の解決策を用意しました。それはニコの解決策の改良です。

//Namespace management idea from http://enterprisejquery.com/2010/10/how-good-c-habits-can-encourage-bad-javascript-habits-part-1/
(function( cursorManager ) {

    //From: http://www.w3.org/TR/html-markup/syntax.html#syntax-elements
    var voidNodeTags = ['AREA', 'BASE', 'BR', 'COL', 'EMBED', 'HR', 'IMG', 'INPUT', 'KEYGEN', 'LINK', 'MENUITEM', 'META', 'PARAM', 'SOURCE', 'TRACK', 'WBR', 'BASEFONT', 'BGSOUND', 'FRAME', 'ISINDEX'];

    //From: /programming/237104/array-containsobj-in-javascript
    Array.prototype.contains = function(obj) {
        var i = this.length;
        while (i--) {
            if (this[i] === obj) {
                return true;
            }
        }
        return false;
    }

    //Basic idea from: /programming/19790442/test-if-an-element-can-contain-text
    function canContainText(node) {
        if(node.nodeType == 1) { //is an element node
            return !voidNodeTags.contains(node.nodeName);
        } else { //is not an element node
            return false;
        }
    };

    function getLastChildElement(el){
        var lc = el.lastChild;
        while(lc && lc.nodeType != 1) {
            if(lc.previousSibling)
                lc = lc.previousSibling;
            else
                break;
        }
        return lc;
    }

    //Based on Nico Burns's answer
    cursorManager.setEndOfContenteditable = function(contentEditableElement)
    {

        while(getLastChildElement(contentEditableElement) &&
              canContainText(getLastChildElement(contentEditableElement))) {
            contentEditableElement = getLastChildElement(contentEditableElement);
        }

        var range,selection;
        if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+
        {    
            range = document.createRange();//Create a range (a range is a like the selection but invisible)
            range.selectNodeContents(contentEditableElement);//Select the entire contents of the element with the range
            range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
            selection = window.getSelection();//get the selection object (allows you to change selection)
            selection.removeAllRanges();//remove any selections already made
            selection.addRange(range);//make the range you have just created the visible selection
        }
        else if(document.selection)//IE 8 and lower
        { 
            range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible)
            range.moveToElementText(contentEditableElement);//Select the entire contents of the element with the range
            range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
            range.select();//Select the range (make it the visible selection
        }
    }

}( window.cursorManager = window.cursorManager || {}));

使用法:

var editableDiv = document.getElementById("my_contentEditableDiv");
cursorManager.setEndOfContenteditable(editableDiv);

このようにして、カーソルは確実に最後の要素の最後に配置され、最終的にネストされます。

編集#1:より一般的にするために、whileステートメントは、テキストを含めることができない他のすべてのタグも考慮する必要があります。これらの要素はvoid要素と呼ばれ、この質問では、要素がvoidであるかどうかをテストする方法についていくつかの方法があります。したがって、引数がvoid要素でない場合にcanContainText返されるという関数が存在すると仮定するtrueと、次のコード行があります。

contentEditableElement.lastChild.tagName.toLowerCase() != 'br'

次のように置き換える必要があります。

canContainText(getLastChildElement(contentEditableElement))

編集#2:上記のコードは完全に更新され、すべての変更が説明および説明されています


興味深いことに、私はブラウザーがこのケースを自動的に処理することを期待していました(そうでないことに驚かないでください。ブラウザーは、contenteditableを使用して直感的なことを行うことは決してないようです)。ソリューションは機能するが私のソリューションは機能しないHTMLの例はありますか?
ニコ・バーンズ

私のコードでは、もう1つのエラーがありました。それを私が直した。これで、私のコードがこのページで機能することを確認できますが、機能しないことを確認できます
Vito Gentile

関数の使用中にエラーが発生しました。コンソールによるUncaught TypeError: Cannot read property 'nodeType' of nullと、これは呼び出されているgetLastChildElement関数によるものです。この問題の原因を知っていますか?
デレク

@VitoGentile少し古い答えですが、ソリューションはブロック要素のみを処理することに注意してください。インライン要素が内部にある場合、カーソルはそのインライン要素の後に配置されます(span、em ...など)。 、簡単な修正は、インライン要素をvoidタグと見なし、それらをvoidNodeTagsに追加して、スキップされるようにすることです。
medBouzid 2016年

239

Geowa4のソリューションは、テキストエリアでは機能しますが、コンテンツ編集可能な要素では機能しません。

このソリューションは、キャレットをコンテンツ編集可能な要素の最後に移動するためのものです。contenteditableをサポートするすべてのブラウザで動作するはずです。

function setEndOfContenteditable(contentEditableElement)
{
    var range,selection;
    if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+
    {
        range = document.createRange();//Create a range (a range is a like the selection but invisible)
        range.selectNodeContents(contentEditableElement);//Select the entire contents of the element with the range
        range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
        selection = window.getSelection();//get the selection object (allows you to change selection)
        selection.removeAllRanges();//remove any selections already made
        selection.addRange(range);//make the range you have just created the visible selection
    }
    else if(document.selection)//IE 8 and lower
    { 
        range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible)
        range.moveToElementText(contentEditableElement);//Select the entire contents of the element with the range
        range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
        range.select();//Select the range (make it the visible selection
    }
}

次のようなコードで使用できます。

elem = document.getElementById('txt1');//This is the element that you want to move the caret to the end of
setEndOfContenteditable(elem);

1
geowa4のソリューションは、chromeのtextareaで機能しますが、どのブラウザのcontenteditable要素でも機能しません。mineはcontenteditable要素に対しては機能しますが、textareaに対しては機能しません。
ニコバーンズ

4
これはこの質問に対する正解です。完璧です、ニコに感謝します。
ロブ

7
selectNodeContents私は明らかに追加するために必要なことが判明するまで、ニコさんの一部は(他のブラウザをテストしていない)私のChromeとFFの両方のエラーを与えていた.get(0)私は、機能を供給したことを要素に。これは、裸のJSの代わりにjQueryを使用している私と関係があると思いますか?私は質問4233265で@jwarzechからこれを学びました。ありがとうございます!
マックススターケンバーグ2012

5
はい、関数はjQueryオブジェクトではなくDOM要素を想定しています。.get(0)jQueryが内部に保存するdom要素を取得します。を追加することもできます[0]。これは.get(0)、このコンテキストと同等です。
ニコバーンズ

1
@Nico Burns:私はあなたの方法を試しましたが、FireFoxでは機能しませんでした。
ルイス

25

古いブラウザを気にしないのであれば、これでうまくいきました。

// [optional] make sure focus is on the element
yourContentEditableElement.focus();
// select all the content in the element
document.execCommand('selectAll', false, null);
// collapse selection to the end
document.getSelection().collapseToEnd();

これは、
Rob

1
これは正常に機能します。Chrome71.0.3578.98およびAndroid5.1のWebViewでテスト済み。
maswerdna


2020これは、まだクロームバージョン83.0.4103.116(公式ビルド)(64ビット)で動作します
user2677034

これが勝者です!
MNN TNK

7

次の範囲でカーソルを最後に設定することができます。

setCaretToEnd(target/*: HTMLDivElement*/) {
  const range = document.createRange();
  const sel = window.getSelection();
  range.selectNodeContents(target);
  range.collapse(false);
  sel.removeAllRanges();
  sel.addRange(range);
  target.focus();
  range.detach(); // optimization

  // set scroll to the end if multiline
  target.scrollTop = target.scrollHeight; 
}

上記のコードを使用するとうまくいきますが、コンテンツの編集可能なdiv内の任意の場所にカーソルを移動し、その時点から入力を続行できるようにしたいのです。たとえば、ユーザーがタイプミスを認識した場合などです。上記のコードをこれに修正しますか?
Zabs 2018

1
@Zabsそれはかなり簡単です:毎回呼び出さないでくださいsetCaretToEnd()-必要なときにだけ呼び出してください:例えば、コピーアンドペーストの後、またはメッセージの長さを制限した後。
am0wa 2018

これは私のために働いた。ユーザーがタグを選択した後、contenteditabledivのカーソルを最後に移動します。
アユド

0

要素を編集可能にしようとすると、同様の問題が発生しました。ChromeとFireFoxでは可能でしたが、FireFoxでは、キャレットは入力の先頭に移動するか、入力の終了後に1スペース移動しました。コンテンツを編集しようとすると、エンドユーザーにとって非常に混乱すると思います。

私はいくつかのことを試みた解決策を見つけられませんでした。私のために働いた唯一のことは、私の中にプレーンな古いテキスト入力を置くことによって「問題を回避する」ことでした。今では動作します。「コンテンツ編集可能」はまだ最先端の技術であるように思われます。これは、コンテキストに応じて、希望どおりに機能する場合と機能しない場合があります。


0

フォーカスイベントに応じて、編集可能なスパンの最後にカーソルを移動します。

  moveCursorToEnd(el){
    if(el.innerText && document.createRange)
    {
      window.setTimeout(() =>
        {
          let selection = document.getSelection();
          let range = document.createRange();

          range.setStart(el.childNodes[0],el.innerText.length);
          range.collapse(true);
          selection.removeAllRanges();
          selection.addRange(range);
        }
      ,1);
    }
  }

そしてそれをイベントハンドラーで呼び出す(ここで反応する):

onFocus={(e) => this.moveCursorToEnd(e.target)}} 

0

との問題はcontenteditable <div><span>最初に入力を開始すると解決されます。これに対する1つの回避策は、div要素とその関数でフォーカスイベントをトリガーし、div要素に既に存在していたものをクリアして補充することです。このようにして問題が解決され、最後に範囲と選択を使用してカーソルを最後に置くことができます。私のために働いた。

  moveCursorToEnd(e : any) {
    let placeholderText = e.target.innerText;
    e.target.innerText = '';
    e.target.innerText = placeholderText;

    if(e.target.innerText && document.createRange)
    {
      let range = document.createRange();
      let selection = window.getSelection();
      range.selectNodeContents(e.target);
      range.setStart(e.target.firstChild,e.target.innerText.length);
      range.setEnd(e.target.firstChild,e.target.innerText.length);
      selection.removeAllRanges();
      selection.addRange(range);
    }
  }

HTMLコードの場合:

<div contentEditable="true" (focus)="moveCursorToEnd($event)"></div>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.