JavaScriptを使用してすべてのテキストを選択解除する機能はありますか？

97

選択したすべてのテキストを選択解除するためのJavaScriptの関数はありますか？私はそれがdocument.body.deselectAll();何かのような単純なグローバル関数である必要があると思います。

javascript  selection 
— NoodleOfDeath
ソース

回答:

163

これを試して：

function clearSelection()
{
 if (window.getSelection) {window.getSelection().removeAllRanges();}
 else if (document.selection) {document.selection.empty();}
}

これにより、主要なブラウザの通常のHTMLコンテンツの選択がクリアされます。テキスト入力や<textarea>Firefoxでの選択はクリアされません。

— アンクール
ソース
25
window.getSelection().removeAllRanges();現在のすべてのブラウザで動作することを確認できます。ライブデモ： jsfiddle.net/hWMJT/1
— サイムVIDAS
あなたのようなボタンをクリックする必要があり、<=「ボタン」の値タイプを=入力されたIDを「は」= /のonclick =「clearSelection（）」「をクリック」>
— はAnkur
1
@Šime-そうではない。ボタンがフォーカスされると選択が失われるため、「機能」します。証明 -コードはコメント化されていますが、選択はまだクリアされています。
— シャドウウィザードはあなたのための耳である
@Shadowこれが適切なデモです：jsfiddle.net/9spL8/3このremoveAllRanges()メソッドは、現在のすべてのブラウザで、段落内のテキストまたは同様の非フォームフィールド要素に対して機能します。（textareaのような）フォームフィールドの場合、このメソッドはIE9およびFF5では機能しません。
— サイムVIDAS
1
標準に準拠しているため、編集してwindow.getSelection().removeAllRanges(); 最初に使用します。独自仕様のコードは常に最後に実行する必要があります。2004年であろうと4004標準準拠であろうと常に最終的には私たちが使用するコードなので、例外なく最初にそれを検出します！
— ジョン
26

これは、テキスト入力やテキストエリア内を含め、選択をクリアするバージョンです：

デモ：http : //jsfiddle.net/SLQpM/23/

function clearSelection() {
    var sel;
    if ( (sel = document.selection) && sel.empty ) {
        sel.empty();
    } else {
        if (window.getSelection) {
            window.getSelection().removeAllRanges();
        }
        var activeEl = document.activeElement;
        if (activeEl) {
            var tagName = activeEl.nodeName.toLowerCase();
            if ( tagName == "textarea" ||
                    (tagName == "input" && activeEl.type == "text") ) {
                // Collapse the selection to the end
                activeEl.selectionStart = activeEl.selectionEnd;
            }
        }
    }
}
— ティム・ダウン
ソース
選択が最初の行からどこかに始まり、より大きなテキストフィールドが含まれている場合は機能しません
— Vyachaslav Gerchicov
1
@VyachaslavGerchicov：それはおそらく、それがすばやく作成された単純な例であり、メインの外側で選択を終了した場合<div>、mouseupイベントは発生しません。代わりにドキュメントにマウスアップハンドラーを配置すると、問題ありません。jsfiddle.net
— Tim Down
これは、要素をドラッグするときにユーザー選択CSSをサポートしない古いブラウザーでの優れた回避策です。マウス移動コールバックでclearSelection（）を呼び出します。
— ジョーディー2017年
6

Internet Explorerの場合、document.selectionオブジェクトのemptyメソッドを使用できます。

document.selection.empty（）;

クロスブラウザソリューションについては、この回答を参照してください。

Firefoxで選択をクリアする

— ルーク・ガービン
ソース
Webサイトが公開されている（ブラウザーを制御するイントラネットではない）場合は、良い考えではなく、クロスブラウザーではありません。
— シャドウウィザードは、
1
@Shadowウィザード- trueの場合、この質問は、クロスブラウザのソリューションのために関連している可能性がある：stackoverflow.com/questions/6186844/...
— ルークGirvin
@Lukeいいね、OPがあなたが与えたものをそのまま使用したので、別のWebサイトが異なるブラウザー間で（おそらく）一貫しないことは残念です。
— シャドウウィザードは、
私の意見では、ブラウザの互換性は私たちが提供する必要がある明白なものです-多くの開発者はそのような違いが存在することすら知らないので、知っている人はそれらを教えるべきです。これはさておき、私はあなたの質問があると述べたことがない、間違っただけで、不足しています。
— シャドウウィザードは、
@Lukeはdocument.selection.clear()作品だけ IEで。ここを参照してください：jsfiddle.net/9spL8/4また、このメソッドは、選択を解除するだけでなく、選択したテキストを削除します。テキストの選択を解除するには、document.selection.empty()代わりにを使用します。
— サイムVIDAS
0

textarea10文字以上の要素の場合、次のように小さな選択が行われ、1秒半後に選択が解除されます。

var t = document.getElementById('textarea_element');
t.focus();
t.selectionStart = 4;
t.selectionEnd = 8;

setTimeout(function()
{
 t.selectionStart = 4;
 t.selectionEnd = 4;
},1500);
— ジョン
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.