在文本区域粘贴时去除换行符 jQuery

Question

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

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

我的 HTML 看起来像这样：

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

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

假设粘贴了以下文本：

Hello

World

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

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);
});

这会在文本区域中产生以下结果：

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

您需要阻止默认操作，以免文本被粘贴两次。要删除所有无关的 whitespace，您可以将 \s+（一个或多个 whitespace 字符）替换为单个 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>

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 的过度使用。您已经拥有 caller inside $(this) 值。所以优化后的代码：

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

P.S。实际上，你会替换textArea里面的文字两次，所以最好再优化一下：

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

在文本区域粘贴时去除换行符 jQuery

Strip newline characters on paste in textarea jQuery

html

javascript

jquery

textarea