Як отримати вибрану позицію тексту з textarea в JavaScript?

20

Я хочу отримати вибране положення тексту за допомогою JavaScript. Наприклад, у
мене проста текстова область.

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

Розгорніть фрагмент

У текстовій області є текст, наприклад:

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

Якщо з цього рядка я вибрав "стати доброю людиною" з textarea,
Тоді як я можу отримати вибране положення тексту / рядка в JavaScript?

Тут вибраний символ рядка починається з 29 і закінчується в 49. Отже, початкова позиція - 29, а кінцева - 49

javascript html

— Пані Тахаццот
джерело

1

Під позицією ви маєте на увазі, що є індексом символу "b" "ставати" в рядку?

— palaѕn

Мені здається, що питання просто запитує HTMLInputElement.selectionStart і selectionEnd, а відповіді в основному говорять про подію вибору. Немає сенсу писати відповідь, яка міститься у всіх інших відповідях.

— JollyJoker

1

Чи відповідає це на ваше запитання? Як отримати вибраний текст з управління текстовими

— полями за

24

Це буде працювати для вибору тексту за допомогою миші та клавіатури для всіх елементів текстових областей сторінки. Переконайтесь, що потрібно змінити перемикач і бути більш конкретним там, і прочитайте коментарі, якщо ви не хочете / не потребуєте вибору клавіатури.

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

— Сахарш

2

Це не спрацює, якщо вибрати клавіатуру, а не мишу.

— допитливий

1

@curiousdannii Я оновив відповідь, тепер вона також працює з вибором клавіатури

— caramba

5

Я б скористався подією onselect, щоб отримати те саме.

<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

Відповідь Карамби спрацювала досить чудово, проте у мене виникло питання, якщо ви вибрали якийсь текст і випустили мишу назовні текстовою областю, подія не відбулася.

Щоб вирішити це, я змінив початкову подію на mousedown, ця подія реєструє mouseupподію в документі, щоб забезпечити його запуск після звільнення курсору. Themouseup подія видаляється після запуску.

Цього можна досягти, додавши 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>

Розгорніть фрагмент

— Hiws
джерело

Мені подобається, як ти реалізував 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)
    }
});});

— Ясір Абдель-Максуд
джерело

Чи можете ви додати трохи пояснення до того, що ви робите?

— Рейчел МакГуйган