วิธีรับตำแหน่งข้อความที่เลือกจาก textarea ใน JavaScript


20

ฉันต้องการรับตำแหน่งข้อความที่เลือกโดยใช้ javascript ตัวอย่างเช่น
ฉันมี textarea ง่าย ๆ

#input-text {
  resize: none;
  width: 50%;
  height: 50px;
  margin: 1rem auto;
}
<textarea id="input-text">I am a student and I want to become a good person</textarea>

ใน textarea ของฉันฉันมีข้อความเช่น:

"I am a student and I want to become a good person"

จากสตริงนี้ถ้าฉันเลือก "เป็นคนดี" จาก textarea
แล้วฉันจะได้รับตำแหน่งข้อความ / สตริงที่เลือกใน javascript ได้อย่างไร?


ที่นี่อักขระสตริงที่เลือกเริ่มต้นที่ 29 และสิ้นสุดใน 49 ตำแหน่งเริ่มต้นคือ 29 และตำแหน่งสุดท้ายคือ 49


1
ตามตำแหน่งคุณหมายถึงดัชนีของตัวละคร "b" ของ "กลายเป็น" ในสตริงคืออะไร?
palaѕн

ฉันรู้สึกเหมือนคำถามกำลังขอHTMLInputElement.selectionStartและselectionEndในขณะที่คำตอบส่วนใหญ่พูดคุยเกี่ยวกับเหตุการณ์การเลือก ไม่มีจุดในการเขียนคำตอบที่รวมอยู่ในคำตอบอื่น ๆ ทั้งหมด
JollyJoker

คำตอบ:


24

สิ่งนี้จะทำงานสำหรับการเลือกข้อความด้วยเมาส์และแป้นพิมพ์สำหรับองค์ประกอบ textarea ทั้งหมดในหน้า ตรวจสอบให้แน่ใจว่าได้เปลี่ยนตัวเลือกและเฉพาะเจาะจงมากขึ้นและอ่านความคิดเห็นหากคุณไม่ต้องการ / ต้องการการเลือกคีย์บอร์ด

var mySelection = function (element) {
    let startPos = element.selectionStart;
    let endPos = element.selectionEnd;
    let selectedText = element.value.substring(startPos, endPos);

    if(selectedText.length <= 0) {
      return; // stop here if selection length is <= 0
    }
    
    // log the selection
    console.log("startPos: " + startPos, " | endPos: " + endPos );
    console.log("selectedText: " +  selectedText);

  };

var textAreaElements = document.querySelectorAll('textarea');
[...textAreaElements].forEach(function(element) {
    // register "mouseup" event for the mouse
    element.addEventListener('mouseup', function(){
        mySelection(element)
    });
    
    // register "keyup" event for the keyboard
    element.addEventListener('keyup', function( event ) {
        // assuming we need CTRL, SHIFT or CMD key to select text
        // only listen for those keyup events
        if(event.keyCode == 16 || event.keyCode == 17 || event.metaKey) {
            mySelection(element)
        }
    });
});
textarea {
   resize: none; 
   width: 50%;
   height: 50px; 
   margin: 1rem auto;
}
<textarea>I am a student and I want to become a good person</textarea>


2
สวยเนี๊ยบ +1
Saharsh

2
สิ่งนี้จะไม่ทำงานหากคุณเลือกใช้แป้นพิมพ์แทนเมาส์
curiousdannii

1
@curiousdannii ฉันได้อัปเดตคำตอบแล้วตอนนี้มันใช้ได้กับการเลือกคีย์บอร์ด
caramba

5

ฉันจะใช้ประโยชน์จากonselect event เพื่อให้เหมือนกัน

<textarea id="input-text" onselect="myFunction(event)">I am a student and I want to become a good person</textarea>


<script>
    function myFunction(event) {
      const start  = event.currentTarget.selectionStart;
      const end= event.currentTarget.selectionEnd;
    }
</script>

1
    var idoftextarea='answer';
    function getSelectedText(idoftextarea){
        var textArea = document.getElementById(idoftextarea);
        var text =textArea.value;
        var indexStart=textArea.selectionStart;
        var indexEnd=textArea.selectionEnd;
        alert(text.substring(indexStart, indexEnd));

    }


    getSelectedText(idoftextarea);


1

คำตอบของ Caramba นั้นใช้งานได้ดีมาก แต่ฉันมีปัญหาว่าถ้าคุณเลือกข้อความและปล่อยเม้าส์นอก textarea เหตุการณ์ก็ไม่เริ่มทำงาน

เพื่อแก้ปัญหานี้ฉันเปลี่ยนเหตุการณ์เริ่มต้นเป็นเหตุการณ์นี้จะmousedownลงทะเบียนmouseupเหตุการณ์บนเอกสารเพื่อให้แน่ใจว่ามันจะเริ่มทำงานหลังจากเคอร์เซอร์ถูกปล่อยออกมา mouseupเหตุการณ์แล้วเอาตัวเองหลังจากที่มันได้ยิง

สามารถทำได้ด้วยการเพิ่มonceตัวเลือกaddEventListenerแต่น่าเศร้าที่ไม่รองรับใน IE11 ซึ่งเป็นสาเหตุที่ฉันใช้วิธีแก้ปัญหาในตัวอย่าง

var mySelection = function (element) {
    let startPos = element.selectionStart;
    let endPos = element.selectionEnd;
    let selectedText = element.value.substring(startPos, endPos);

    if(selectedText.length <= 0) {
      return; // stop here if selection length is <= 0
    }
    
    // log the selection
    console.log("startPos: " + startPos, " | endPos: " + endPos );
    console.log("selectedText: " +  selectedText);
};

function addSelfDestructiveEventListener (element, eventType, callback) {
    let handler = () => {
        callback();
        element.removeEventListener(eventType, handler);
    };
    element.addEventListener(eventType, handler);
};

var textAreaElements = document.querySelectorAll('textarea');
[...textAreaElements].forEach(function(element) {
    // register "mouseup" event for those
    element.addEventListener('mousedown', function(){
      // This will only run the event once and then remove itself
      addSelfDestructiveEventListener(document, 'mouseup', function() {
        mySelection(element)
      })
    });
    
    // register "keyup" event for the keyboard
    element.addEventListener('keyup', function( event ) {
        // assuming we need CTRL, SHIFT or CMD key to select text
        // only listen for those keyup events
        if(event.keyCode == 16 || event.keyCode == 17 || event.metaKey) {
            mySelection(element)
        }
    });
});
textarea {
   resize: none; 
   width: 50%;
   height: 50px; 
   margin: 1rem auto;
}
<textarea>I am a student and I want to become a good person</textarea>


ฉันชอบวิธีที่คุณใช้addSelfDestructiveEventListener!
caramba

0
var mySelection = function (element) {
let startPos = element.selectionStart;
let endPos = element.selectionEnd;
let selectedText = element.value.substring(startPos, endPos);

if(selectedText.length <= 0) {
  return; // stop here if selection length is <= 0
}

// log the selection
console.log("startPos: " + startPos, " | endPos: " + endPos );
console.log("selectedText: " +  selectedText); };var textAreaElements = document.querySelectorAll('textarea'); 
[...textAreaElements].forEach(function(element) {
// register "mouseup" event for the mouse
element.addEventListener('mouseup', function(){
    mySelection(element)
});
// register "keyup" event for the keyboard
element.addEventListener('keyup', function( event ) {
    // assuming we need CTRL, SHIFT or CMD key to select text
    // only listen for those keyup events
    if(event.keyCode == 16 || event.keyCode == 17 || event.metaKey) {
        mySelection(element)
    }
});});

คุณช่วยเพิ่มคำอธิบายเล็กน้อยให้กับรหัสที่คุณใช้ทำอะไรได้บ้าง?
Rachel McGuigan
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.