Obliczanie długości zaznaczonego i skasowanego przez użytkownika tekstu.

pytanie zadane 5 września 2018 w JavaScript przez BetBet Użytkownik (550 p.)

Witam,
W jaki sposób mogę uzyskać dostęp do tego co zaznaczył użytkownik w celu policzenia długości tego co zaznaczył?

2 odpowiedzi

odpowiedź 5 września 2018 przez pablop76 VIP (123,120 p.)

Sprawdź getSelection()

komentarz 6 września 2018 przez pablop76 VIP (123,120 p.)

<p>
Witam,
W jaki sposób mogę uzyskać dostęp do tego co zaznaczył użytkownik w celu policzenia długości tego co zaznaczył? 
</p>
<div id="score">
  Zaznaczony tekst to:<br>
  Jego długość wynosi: 0
</div>

document.addEventListener('mouseup',function(){
  var selObj = window.getSelection(); 
   var selRange = selObj.getRangeAt(0);
  var selection = selRange.toString()
   var count = selRange.endOffset - selRange.startOffset;
   var score = document.getElementById('score');
   score.innerHTML = 'Zaznaczony tekst to: ' + selection +' <br>'  +   'Jego długość wynosi: ' + count;
});

odpowiedź 5 września 2018 przez BetBet Użytkownik (550 p.)
edycja 5 września 2018 przez BetBet

Dobra, rozwiązanie było wiele prostsze, wystarczyło dodać setTimeout() z jakąś niezauważalną dla okoa wartością, żeby js poczekał z odczytem wartości.

Jeśli ktoś trafi na temat zostawiam rozwiązanie - funkcja podpowiadająca ile użytkownikowi zostało liter do wpisania.

this.charsLeft = function (classOrIDTextElement, classOrIDContainerForNumber, maxLength, message = ': letters left', messageForOne = ': letter left') {
    setTimeout(function () {
        let strLength = $(classOrIDTextElement).val().length;
        if (strLength <= (maxLength - 2)) {
            $(classOrIDContainerForNumber).html(maxLength - strLength + message);
        } else if (strLength === (maxLength - 1)) {
            $(classOrIDContainerForNumber).html(maxLength - strLength + messageForOne);
        } else {
            $(classOrIDContainerForNumber).html(strLength - strLength + messageForOne);
        }
    }, 100);

    $(classOrIDTextElement).on('keydown', function (e) {
        setTimeout(function () {
            let strLength = $(classOrIDTextElement).val().length;
            let charsLeft = maxLength - strLength;
            if (e.keyCode === 8) {
                if (strLength === -1) {
                    //do nothing
                } else {
                    if (strLength <= (maxLength - 2)) {
                        $(classOrIDContainerForNumber).html(charsLeft++ + message);
                    } else if (strLength === (maxLength - 1)) {
                        $(classOrIDContainerForNumber).html(charsLeft++ + messageForOne);
                    } else {
                        $(classOrIDContainerForNumber).html(charsLeft++ + messageForOne);
                    }
                }
            }
        }, 100);

    });
};