Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Copied data not pasting at the cursor location second time

I have the following code where I am copying the following data:

ABC123
DEF123
HIJ123

and pasting it into the text area. So the cursor is just after the HIJ123 after pasting the code as shown below:

enter image description here

Now let’s say I introduce a new line after ABC123 as shown below:

enter image description here

And my cursor is on the line after ABC123 and then I try to past these 3 records again on that line, it is getting messed up as shown below:

enter image description here

Why it is not getting pasted where it should be and it’s getting messed up ?

let element = document.getElementById("post-text");

element.addEventListener('paste', (e) => {
  e.preventDefault();
  console.log(event.clipboardData);
  element.value += (event.clipboardData || window.clipboardData).getData("text").trim()
});

document.getElementById('post-button').addEventListener('click', function() {

  var lines = $('#post-text').val().split('n'); //gives all lines

  ///var lines = element.split('n');//gives all lines

  //To paste
  /*
    ABC123
    DEF123
    HIJ123
 */

  console.log(lines);
  console.log(lines.length);
  var firstLine = lines[0];
  console.log(firstLine);
  var secondLine = lines[1];
  console.log(secondLine);

  for (i = 0; i < lines.length; i++) {
    $("#phrase").append("<div>" + lines[i] + "</div>")
  }
});
#case-stack p {
  white-space: pre-wrap;   /* <-- THIS PRESERVES THE LINE BREAKS */
}

textarea {
  width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<textarea id="post-text" class="form-control" rows="8" placeholder="What's up?" required></textarea><br>
<input type="button" id="post-button" value="Post!">
<div id="phrase"></div>
Tags:

2

Answers


  1. 0

    add event listener on paste

    $('textarea').on('paste', function(event) {
  event.preventDefault();//prevent pasted text being added
  // add ID so we can clear textarea
  let text_area_id = $(this).attr('id');
  $('#' + text_area_id).val('');
  let clip = event.originalEvent.clipboardData.getData('Text');
  let final_clip = clip.replace('', 'n');
  console.log(final_clip);
  $('#' + text_area_id).val(final_clip);
});
    Login or Signup to reply.
  2. 0

    You can just remove the entire ‘paste’ event listener and let the default behaviour do its thing.

    See demo below

    let element = document.getElementById("post-text");
/* removed paste listener */

document.getElementById('post-button').addEventListener('click', function() {

  var lines = $('#post-text').val().split('n'); //gives all lines
  ///var lines = element.split('n');//gives all lines

  //To paste
  /*
    ABC123
    DEF123
    HIJ123
 */

  console.log(lines);
  console.log(lines.length);
  var firstLine = lines[0];
  console.log(firstLine);
  var secondLine = lines[1];
  console.log(secondLine);

  for (i = 0; i < lines.length; i++) {
    $("#phrase").append("<div>" + lines[i] + "</div>")
  }
});
    #case-stack p {
  white-space: pre-wrap;
  /* <-- THIS PRESERVES THE LINE BREAKS */
}

textarea {
  width: 100%;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<textarea id="post-text" class="form-control" rows="8" placeholder="What's up?" required></textarea><br>
<input type="button" id="post-button" value="Post!">
<div id="phrase"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search