Làm cách nào để có được vị trí văn bản được chọn từ textarea trong JavaScript?

20

Tôi muốn có được vị trí văn bản đã chọn bằng cách sử dụng javascript. Ví dụ,
tôi có một textarea đơn giản.

#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>

Mở rộng đoạn trích

Trong textarea của tôi, tôi có một số văn bản như:

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

Từ chuỗi này, nếu tôi chọn "trở thành một người tốt" từ textarea,
thì làm cách nào tôi có thể có được vị trí văn bản / chuỗi đã chọn trong javascript?

Ở đây, ký tự chuỗi đã chọn bắt đầu từ 29 và kết thúc ở 49. Vì vậy, vị trí bắt đầu là 29 và vị trí kết thúc là 49

javascript html

— Ông Tahazzot
nguồn

1

Theo vị trí bạn có nghĩa là chỉ số của ký tự "b" của "trở thành" trong chuỗi là gì?

— palaѕн

Tôi cảm thấy như câu hỏi chỉ là yêu cầu cho HTMLInputElement.selectionStart và selectionEnd trong khi câu trả lời chủ yếu là nói về sự kiện lựa chọn. Mặc dù không có điểm nào trong việc viết một câu trả lời trong tất cả các câu trả lời khác.

— JollyJoker

1

Điều này có trả lời câu hỏi của bạn không? Cách nhận văn bản đã chọn từ điều khiển hộp văn bản bằng javascript

— Matsemann

24

Điều này sẽ làm việc để lựa chọn văn bản bằng chuột và bàn phím cho tất cả các yếu tố văn bản trên trang. Đảm bảo thay đổi bộ chọn và cụ thể hơn ở đó và đọc các nhận xét nếu bạn không muốn / cần lựa chọn bàn phím.

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>

Mở rộng đoạn trích

— caramba
nguồn

2

Khá gọn gàng. +1

— Saharsh

2

Điều này sẽ không kích hoạt nếu bạn chọn sử dụng bàn phím thay vì chuột.

— tò mò

1

@cquildannii Tôi đã cập nhật câu trả lời, bây giờ nó cũng hoạt động với lựa chọn bàn phím

— caramba

5

Tôi sẽ sử dụng các sự kiện onselect để có được cùng.

<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>

— Giấc mơ
nguồn

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);

— Nourhan Ahmed
nguồn

1

Câu trả lời của Caramba hoạt động khá tuyệt vời, tuy nhiên tôi có một vấn đề là nếu bạn chọn một số văn bản và thả con chuột ra ngoài vùng văn bản, sự kiện đã không kích hoạt.

Để giải quyết vấn đề này, tôi đã thay đổi sự kiện ban đầu thành mousedown, sự kiện này đăng ký một mouseupsự kiện trên tài liệu để đảm bảo nó kích hoạt sau khi con trỏ được giải phóng. Sự mouseupkiện sau đó tự loại bỏ sau khi nó đã bắn.

Điều này có thể đạt được bằng cách thêm oncetùy chọn vào addEventListener, nhưng thật đáng buồn là không được hỗ trợ trong IE11, đó là lý do tại sao tôi sử dụng giải pháp trong đoạn trích.

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>

Mở rộng đoạn trích

— Xin chào
nguồn

Tôi thích cách bạn thực hiện 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)
    }
});});

— Yasser Abdel-Maksoud
nguồn

Bạn có thể vui lòng thêm một chút giải thích cho những gì bạn viết mã không?

— Rachel McGuigan