ล้างการเลือกข้อความด้วย JavaScript


123

คำถามง่ายๆที่หาคำตอบไม่ได้: ฉันจะใช้ JavaScript (หรือ jQuery) เพื่อยกเลิกการเลือกข้อความใด ๆ ที่อาจเลือกบนหน้าเว็บได้อย่างไร ผู้ใช้ EG คลิกและลากเพื่อเน้นข้อความเล็กน้อย - ฉันต้องการให้ฟังก์ชันยกเลิกการเลือกทั้งหมด () ซึ่งจะล้างการเลือกนี้ ฉันจะเขียนมันได้อย่างไร?

ขอบคุณสำหรับความช่วยเหลือ

คำตอบ:


207
if (window.getSelection) {
  if (window.getSelection().empty) {  // Chrome
    window.getSelection().empty();
  } else if (window.getSelection().removeAllRanges) {  // Firefox
    window.getSelection().removeAllRanges();
  }
} else if (document.selection) {  // IE?
  document.selection.empty();
}

เครดิตคุณย.


4
สิ่งนี้ถือว่าการมีอยู่ของdocument.selectionส่อถึงการดำรงอยู่ของempty()วิธีการของมัน คุณได้ทดสอบวิธีนี้แล้วในทุกกรณีดังนั้นคุณอาจทดสอบemptyในกรณีสุดท้ายด้วยเช่นกัน
Tim Down

ใช้สิ่งนี้ภายในปลั๊กอินjquery.tableCheckbox.jsของฉันขอบคุณ
Marco Kerwitz

1
ฉันได้สร้างตัวอย่างการทำงานแบบเต็มตามคำแนะนำของคุณ แต่เพิ่มความพิเศษบางอย่างjsfiddle.net/mkrivan/hohx4nesบรรทัดที่สำคัญที่สุดคือ window.getSelection () addRange (document.createRange ()); หากไม่มี IE นี้จะไม่ยกเลิกการเลือกข้อความในบางเงื่อนไข และฉันได้เปลี่ยนลำดับของการตรวจหาวิธีการแล้ว
Miklos Krivan

คุณช่วยวันของฉันเพื่อนของฉัน! ฉันใช้ scratchpad และเมื่อเกาทั้งหน้าถูกเลือกและด้วยสคริปต์ที่ดีนี้ฉันยกเลิกการเลือกหน้าของฉันก่อนที่จะใช้ปลั๊กอิน scratchpad โดยทั่วไปได้ผล! ขอบคุณมาก!
รวม

1
ฉันคิดว่าwindow.getSelection().removeAllRanges();ทำงานได้ดีใน IE (edge) และ Safari
ชิลี

48

ดีที่สุดในการทดสอบคุณสมบัติที่คุณต้องการโดยตรง:

var sel = window.getSelection ? window.getSelection() : document.selection;
if (sel) {
    if (sel.removeAllRanges) {
        sel.removeAllRanges();
    } else if (sel.empty) {
        sel.empty();
    }
}

15

สถานะของการยกเลิกการคัดเลือก 2557

ฉันได้ค้นคว้าด้วยตัวเอง นี่คือฟังก์ชั่นที่ฉันเขียนและใช้งานอยู่ทุกวันนี้:

(function deselect(){
  var selection = ('getSelection' in window)
    ? window.getSelection()
    : ('selection' in document)
      ? document.selection
      : null;
  if ('removeAllRanges' in selection) selection.removeAllRanges();
  else if ('empty' in selection) selection.empty();
})();

โดยทั่วไปแล้วgetSelection().removeAllRanges()เบราว์เซอร์สมัยใหม่ทั้งหมดได้รับการสนับสนุน (รวมถึง IE9 +) นี่เป็นวิธีการที่ถูกต้องในการก้าวไปข้างหน้า

ปัญหาความเข้ากันได้คิดเป็น:

  • ใช้ Chrome และ Safari เวอร์ชันเก่า getSelection().empty()
  • ใช้ IE8 และต่ำกว่า document.selection.empty()

ปรับปรุง

อาจเป็นความคิดที่ดีที่จะสรุปฟังก์ชันการเลือกนี้เพื่อนำกลับมาใช้ใหม่

function ScSelection(){
  var sel=this;
  var selection = sel.selection = 
    'getSelection' in window
      ? window.getSelection()
      : 'selection' in document
        ? document.selection
        : null;
  sel.deselect = function(){
    if ('removeAllRanges' in selection) selection.removeAllRanges();
    else if ('empty' in selection) selection.empty();
    return sel; // chainable :)
  };
  sel.getParentElement = function(){
    if ('anchorNode' in selection) return selection.anchorNode.parentElement;
    else return selection.createRange().parentElement();
  };
}

// use it
var sel = new ScSelection;
var $parentSection = $(sel.getParentElement()).closest('section');
sel.deselect();

ฉันได้ทำให้เป็นวิกิชุมชนเพื่อให้คุณสามารถเพิ่มฟังก์ชันการทำงานนี้หรืออัปเดตสิ่งต่างๆได้เมื่อมาตรฐานพัฒนาขึ้น


7
นั่นก็ทำเช่นเดียวกับคำตอบของฉัน ไม่มีอะไรเปลี่ยนแปลงใน 4 ปี
Tim Down

3
น่ากลัว คุณไม่เพียง แต่ขโมยการใช้งานจากโปสเตอร์อื่นอย่างแท้จริง แต่คุณยังทิ้งมันลงในถังขยะ
kamelkev

1

นี่คือคำตอบที่ยอมรับ แต่มีรหัสสองบรรทัด:

var selection = window.getSelection ? window.getSelection() : document.selection ? document.selection : null;
if(!!selection) selection.empty ? selection.empty() : selection.removeAllRanges();

เพียงตรวจสอบผมไม่ทำคือการดำรงอยู่ของ removeAllRanges - แต่ AFAIK มีเบราว์เซอร์ที่มีไม่มีอย่างใดอย่างหนึ่งwindow.getSelectionหรือdocument.selectionแต่ไม่ได้มีทั้ง.emptyหรือ.removeAllRangesสำหรับทรัพย์สินที่


0

window.getSelection () ช่วยให้คุณเข้าถึงข้อความที่เลือกจากที่นั่นมีบางสิ่งที่คุณสามารถทำได้เพื่อจัดการกับมัน ..

อ่านเพิ่มเติม: ผู้พัฒนา Mozilla DOM Selection


-1

เพิ่มสิ่งนี้ลงในสคริปต์ของคุณเพื่อป้องกันการคลิกขวาและการเลือกข้อความ

สามารถเพิ่มข้อยกเว้นใน var 'om' ได้

var d=document,om=['input','textarea','select'];;
function ie(){if(d.all){(mg);return false;}}function mz(e){if(d.layers||(d.getElementById&&!d.all)){if(e.which==2||e.which==3){(mg);return false;}}}if(d.layers){d.captureEvents(Event.mousedown);d.onmousedown=mz;}else{d.onmouseup=mz;d.oncontextmenu=ie;}d.oncontextmenu=new Function('return false');om=om.join('|');function ds(e){if(om.indexOf(e.target.tagName.toLowerCase())==-1);return false;}function rn(){return true;}if(typeof d.onselectstart!='undefined')d.onselectstart=new Function('return false');else{d.onmousedown=ds;d.onmouseup=rn;}
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.