在textarea jQuery中粘贴时去除换行符

Question

我觉得这应该比现在更容易。

我在 jQuery 中有一堆文本区域。在粘贴时，我想去掉换行符并用空格替换它们。

我的 HTML 如下所示：

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

我尝试了很多解决方案，但最后，textarea 永远不会被清除。如果我检查元素，所有文本都消失了，但在我的页面上，它仍然存在。

鉴于粘贴了以下文本：

Hello

World

我希望我的 textarea 最终看起来像这样（当然是粘贴）：

Hello  World

这是我尝试过的。

尝试 #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);
});

这会在 textarea 中产生以下结果：

Hello
 
 WorldHello

World

同时，记录了正确的final_clip 变量，而textarea 本身（检查时）为空。

尝试 #2：

我了解到您可能需要在文本字段上输入 ID。由于我有大量没有 id 的文本区域，我想我可以动态生成一个：

$('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);
});

这给出了相同的结果：

Hello

 WorldHello

World

尝试 #3：

我决定将id 添加到文本区域本身。所以我的 HTML 现在看起来像：

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

我的 JS 现在看起来像：

$('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);
});

这给出了相同的结果：

Hello

 WorldHello

World

附带说明一下，在获取 ID 时，我只是尝试使用 $(text_area_id) 而不是 $('#' + text_area_id)，这不起作用。我也试过只使用 $(this).val('') 和 $(this).val() 也不起作用。

我想我可能要疯了。我怎样才能做到这一点？

Answer 1

您需要阻止默认操作，以便文本不会被粘贴两次。要删除所有无关的空格，您可以将\s+（一个或多个空格字符）替换为一个空格。

$('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>

Answer 2

对原始问题和@hev1 的答案的补充说明

我看到了这段代码：

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

但这是对 jQuery 的过度使用。您已经在$(this) 值中拥有caller。所以优化后的代码：

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

附：实际上，您将两次替换 textArea 内的文本，因此最好再优化一下：

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