在textarea jQuery

问题描述

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

我在jQuery中有一堆textareas。粘贴时，我要去除换行符，并用空格替换。

我的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()来解决问题。

我想我可能会发疯。我该如何工作？

解决方法

您需要阻止默认操作，以便文本不会被粘贴两次。要删除所有多余的空格，您可以将\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>

,

仅是原始问题和@ hev1的答案的旁注

我看到以下代码：

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

但这是对jQuery的过度使用。您已经在caller值中包含$(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);