Copy/Paste String in HTML Fields

Question

I am trying to copy a string from notepad to HTML form on base of new line but it is not working for me, below is the code snippet for your help. First Line Should Populate in Field 1, 2nd in Field 2 and 3rd in Field 3

 $("input[name=query]").on("paste", function() { var $this = $(this); setTimeout(function() { var id = $this.attr("id"), no = parseInt(id.substr(5)), //groups = $this.val().split(/\s+/); //groups = $this.val().split('.'); groups = $this.val().split(/[\n\r]/g); if (groups) { var i = 0; while (no <= 3 && i < groups.length) { $("#input" + no).val(groups[i]); ++no; ++i; } } }, 0); });

 form { width: 500px; margin: 50px auto 0; } form h2 { text-align: center; text-decoration: underline; } form table { width: 100%; } form input { width: 100%; height: 40px; border-radius: 5px; outline: none; padding: 0 15px; border: 1px solid #000000; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form name="form1" action="#" method="get" target=""> <h2>Copy/Paste String</h2> <table cellpadding="0" cellspacing="20"> <tr> <td width="100px"><h3>Line 1:</h3></td> <td><input id="input1" name="query" placeholder="Line 1" type="text"></td> </tr> <tr> <td width="100px"><h3>Line 2:</h3></td> <td><input id="input2" name="query" placeholder="Line 2" type="text" ></td> </tr> <tr> <td width="100px"><h3>Line 3:</h3></td> <td><input id="input3" name="query" placeholder="Line 3" type="text"></td> </tr> </table> </form>

Below is the 3 lines I am trying to copy from notepad behavior is new line

This is Line 1
This is Line 2
This is Line 3

Kindly have a look into snippet and guide, where I am doing mistake

Answer 1

The problem with that is your line breaks are being lost when you paste into the (single-line) inputs; only textareas will preserve line breaks; normal inputs will collapse multi-line text into a single line.

The solution is to read the pasted input not from the input but via the clipboardData() area of the event - not the contrived jQuery event, but the original (native) event. jQuery exposes this via the originalEvent property.

This also means you can avoid the timeout hack. All in all:

let fields = $('input[name=query]');
$(document).on('paste', 'input[name=query]', evt => {
    evt.preventDefault();
    let pasted = evt.originalEvent.clipboardData.getData('text/plain');
    pasted.split(/\n/).forEach((line, i) => fields[i].value = line);
});

Fiddle

(Further reading: my blog post about hacking incoming clipboard data.)

Answer 2

You can try this:

$("input[name=query]").on("paste", function(e) {    

            // Stop data actually being pasted into div
            e.stopPropagation();
            e.preventDefault();

            // Get pasted data via clipboard API
            pastedData = window.event.clipboardData.getData('Text');
            
            // Do whatever with pasteddata
            var $this = $(this);
            setTimeout(function() {
                var id = $this.attr("id"), no = parseInt(id.substr(5)),groups = pastedData.split("\n");
                if (groups) {
                    var i = 0;
                    while (no <= 3 && i < groups.length) {
                        $("#input" + no).val(groups[i]);
                        ++no;
                        ++i;
                    }
                }
        }, 0);
    });

Good luck!