CODEWITHSUNDEEP
javascripthtmljquerytextarea
Alex
Alex

Reputation: 2289

Strip newline characters on paste in textarea jQuery

I feel like this should be easier than it is.

I have a bunch of textareas in jQuery. On paste, I want to strip newline characters and replace them with spaces.

My HTML looks like this:

<textarea name="my-name-1"></textarea>
<textarea name="my-name-2"></textarea>
<textarea name="my-name-3"></textarea>

I've tried a bunch of solutions, but in the end, the textarea never gets cleared. If I inspect the element all the text is gone, but on my page, it's still there.

Given the following text pasted:

Hello

World

I want my textarea to end up looking like this (on paste of course):

Hello  World

Here is what I've tried.

Attempt #1:

$('textarea').on('paste', function(event){
      let text_area_name = $(this).attr('name');
      $('textarea[name="'+text_area_name+'"]').val('');
      let clip = event.originalEvent.clipboardData.getData('Text');
      let final_clip = clip.replace(/[\n]/g,' ');
      console.log(final_clip);
      $('textarea[name="'+text_area_name+'"]').val(final_clip);
});

This results in the following in the textarea:

Hello
 
 WorldHello

World

Meanwhile, the correct final_clip variable is logged and the textarea itself (on inspect) is empty.

Attempt #2:

I read that you might need an ID on a text field. Since I have a ton of textareas without ids, I figured I could dynamically generate one:

$('textarea').on('paste', function(event){
      // add ID so we can clear textarea
      let text_area_id = $(this).attr('name');
      $(this).attr('id',text_area_id);
      $('#'+text_area_id).val('');
      let clip = event.originalEvent.clipboardData.getData('Text');
      let final_clip = clip.replace(/[\n]/g,' ');
      console.log(final_clip);
      $('#'+text_area_id).val(final_clip);
});

This gives the same result:

Hello

 WorldHello

World

Attempt #3:

I decided to just add the id to the textarea itself. So my HTML now looked like:

<textarea id="my-name-1"></textarea>
<textarea id="my-name-2"></textarea>
<textarea id="my-name-3"></textarea>

and my JS now looked like:

$('textarea').on('paste', function(event){
          // 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]/g,' ');
          console.log(final_clip);
          $('#'+text_area_id).val(final_clip);
});

This gave the same result:

Hello

 WorldHello

World

As a side note, when getting the ID's, I've alternatively just tried to use $(text_area_id) instead of $('#' + text_area_id) which doesn't work. I've also tried just using $(this).val('') and $(this).val() which also doesn't work.

I think I might be going crazy. How can I make this work?

Upvotes: 1

Views: 1079

Answers (2)

Anton
Anton

Reputation: 2703

Just a side note to the original question and to the answer by @hev1

I see this code:

let text_area_id = $(this).attr('id');
$('#'+text_area_id).val('');
//.... some other lines here ....
$('#'+text_area_id).val(final_clip);

But this is overuse of jQuery. You already has the caller inside $(this) value. So the optimized code:

const textArea = $(this);
textArea.val('');
//.... some other lines here ....
textArea.val(final_clip);

P.S. Actually, you will replace the text inside textArea twice, so better optimize a bit more:

const textArea = $(this);
//.... some other lines here ....
textArea.val(final_clip);

Upvotes: 0

Unmitigated
Unmitigated

Reputation: 89139

You need to prevent the default action so that the text is not pasted twice. To remove all extraneous whitespace, you can replace \s+ (one or more whitespace characters) with a single space.

$('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(/\s+/g, ' ');
  console.log(final_clip);
  $('#' + text_area_id).val(final_clip);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="my-name-1" placeholder="Paste text here"></textarea>
<br/>
Text to Paste:
<pre>
Hello

World
</pre>

Upvotes: 1

Related Questions