JavaScript paste event on selected text

Question

Problem:

I want to format incoming text via paste, but the approach I am taking only allows to replace existing text, or add to it, thus selected text is intacted.

So how to get selected text on paste event.

I don't care for cross browser support.

How should it look like:

text inside textarea: aa 12 56 99<-selected text
text in clipboard:56abccda6
text output:aa 15 6a bc cda6

JavaScript/jquery

$(document).ready(function(){
    function isHex(h) {
        let a = parseInt(h,16);
        return (a.toString(16) ===h.toLowerCase())
    }
    function formatText(text) {
        if(isHex(text)){
            let splitedText = text.match(/[\s\S]{1,2}/g) || [];
            splitedText = splitedText.join(' ');
            return splitedText;
        }
        return text;
    }
    $('textarea[name=plainText]').on('paste', function(event) {
        let formatedText = formatText(event.originalEvent.clipboardData.getData('text'));
        $(this).val($(this).val() + formatedText);
        //or
        //  $(this).val(formatedText);
        return false;
      });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea placeholder="Message" name="plainText" id="plainText" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Message'"></textarea>

It might be a cross browser issue ... What browser do you want it to be working? — Brainfeeder, Apr 23 '18 at 09:54
You never say, in the script, that the selected text should be replaced. In fact you tell it to add it after the existing text. So it does what you tell it to do. — Brainfeeder, Apr 23 '18 at 09:57
Duplicate question, check [this answer](https://stackoverflow.com/a/3966822/1397220) — Brainfeeder, Apr 23 '18 at 10:00

score 0 · Accepted Answer · answered Apr 23 '18 at 10:21

http://code.google.com/p/rangyinputs

$(document).ready(function(){
        $('textarea[name=plainText]').on('paste', function(event) {
            let formatedText = 
        formatText(event.originalEvent.clipboardData.getData('text'));
        $("#plainText").replaceSelectedText(formatedText);
            return false;
        })
});

JavaScript paste event on selected text

Problem:

1 Answers1