มีฟังก์ชันในการยกเลิกการเลือกข้อความทั้งหมดโดยใช้ JavaScript หรือไม่?


102

มีฟังก์ชั่นในจาวาสคริปต์เพื่อยกเลิกการเลือกข้อความที่เลือกทั้งหมดหรือไม่ ฉันคิดว่ามันต้องเป็นฟังก์ชันระดับโลกอย่างง่ายเช่นdocument.body.deselectAll();หรืออะไรสักอย่าง

คำตอบ:


170

ลองสิ่งนี้:

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

การดำเนินการนี้จะล้างการเลือกในเนื้อหา HTML ปกติในเบราว์เซอร์หลัก ๆ จะไม่ล้างสิ่งที่เลือกในการป้อนข้อความหรือ<textarea>ใน Firefox


26
ฉันสามารถยืนยันได้ว่าใช้window.getSelection().removeAllRanges();งานได้ในทุกเบราว์เซอร์ปัจจุบัน สาธิตสด: jsfiddle.net/hWMJT/1
Šime Vidas

คุณต้องคลิกปุ่มเช่น <input id = 'but' type = 'button' value = 'click' / onclick = 'clearSelection ()'>
Ankur

1
@ Šime - ไม่จริง มัน "ใช้งานได้" เนื่องจากการเลือกจะหายไปเมื่อปุ่มได้รับโฟกัส หลักฐาน - รหัสถูกแสดงความคิดเห็นการเลือกยังคงถูกล้าง
Shadow Wizard is Ear For You

@Shadow นี่คือการสาธิตที่เหมาะสม: jsfiddle.net/9spL8/3removeAllRanges()วิธีการทำงานในเบราว์เซอร์ในปัจจุบันทั้งหมดสำหรับข้อความภายในย่อหน้าหรือองค์ประกอบที่ไม่ใช่รูปแบบสาขาที่คล้ายกัน สำหรับ form-fields (เช่น textarea) วิธีนี้ใช้ไม่ได้ใน IE9 และ FF5
Šime Vidas

1
แก้ไขให้ใช้window.getSelection().removeAllRanges(); ก่อนเนื่องจากเป็นไปตามมาตรฐานรหัสกรรมสิทธิ์ควรถูกเรียกใช้ครั้งสุดท้ายเสมอ ไม่ว่าจะเป็นรหัสที่เป็นไปตามมาตรฐานปี 2004 หรือ 4004 ในท้ายที่สุดจะเป็นสิ่งที่เราใช้เสมอดังนั้นให้ตรวจจับก่อนโดยไม่มีข้อยกเว้น!
John

27

นี่คือเวอร์ชันที่จะล้างการเลือกใด ๆ รวมถึงภายในอินพุตข้อความและพื้นที่ข้อความ:

การสาธิต: 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/SLQpM/23
Tim Down

นี่เป็นวิธีแก้ปัญหาที่ยอดเยี่ยมในเบราว์เซอร์รุ่นเก่าที่ไม่รองรับ CSS ที่ผู้ใช้เลือกเมื่อลากองค์ประกอบไปรอบ ๆ เรียก clearSelection () ในการเรียกกลับของเมาส์
Geordie

6

สำหรับ Internet Explorer คุณสามารถใช้วิธีการว่างของวัตถุ document.selection:

document.selection.empty ();

สำหรับโซลูชันข้ามเบราว์เซอร์โปรดดูคำตอบนี้:

ล้างการเลือกใน Firefox


หากเว็บไซต์ของคุณเป็นแบบสาธารณะ (ไม่ใช่อินทราเน็ตที่คุณควบคุมเบราว์เซอร์) ไม่ใช่ความคิดที่ดีไม่ใช่ข้ามเบราว์เซอร์
Shadow Wizard is Ear For You

1
@Shadow Wizard - จริงคำถามนี้อาจเกี่ยวข้องกับการแก้ปัญหาข้ามเบราว์เซอร์: stackoverflow.com/questions/6186844/…
Luke Girvin

@ ลุคดีแย่เกินไปที่เว็บไซต์อื่นจะ (อาจ) ไม่สอดคล้องกันระหว่างเบราว์เซอร์ต่างๆเนื่องจาก OP ใช้สิ่งที่คุณให้ตามที่เป็นอยู่
Shadow Wizard is Ear For You

ในความคิดของฉันความเข้ากันได้ของเบราว์เซอร์เป็นสิ่งที่ชัดเจนซึ่งเราควรนำเสนอ - นักพัฒนาหลายคนไม่ทราบถึงความแตกต่างดังกล่าวดังนั้นผู้ที่รู้ควรบอกพวกเขา นี้กันฉันไม่เคยบอกว่าคำถามของคุณไม่ถูกต้องเพียงแค่หายไป
Shadow Wizard is Ear For You

@Luke ใช้document.selection.clear()งานได้เฉพาะใน IE ดูที่นี่: jsfiddle.net/9spL8/4นอกจากนี้วิธีนี้จะลบข้อความที่เลือกไม่ใช่แค่ยกเลิกการเลือก หากต้องการยกเลิกการเลือกข้อความให้ใช้document.selection.empty()แทน
Šime Vidas

0

สำหรับtextareaองค์ประกอบที่มีอักขระอย่างน้อย 10 ตัวต่อไปนี้จะทำการเลือกเล็กน้อยจากนั้นหนึ่งวินาทีครึ่งให้ยกเลิกการเลือก:

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.