使用jquery创建textArea元素和复制按钮

我想创建一个包含三个元素的页面，一个在另一个的下面：文本字段（TextArea）;复制按钮;一个div元素，初始文本为空。每当单击Copy按钮时，在TextArea中键入的文本应该被转移到div中包含的文本的末尾。我的代码有一个textArea，我已经设法在它旁边放置了一个copy按钮，但我想不出一个函数来解决这个问题。这个问题只能用jquery选择器来解决。最后，在这个文本框（textarea）的上方，应该显示用户输入的字符数，在我的js（jquery）中，我试图创建一个函数，但后来我删除了它，因为我不能，但我想知道如何做到这一点。

$('button').click(function() {
  $('.classB').text('Alterado pelo click do botão')
});

<div class="container-fluid p-5 bg-primary text-white text-center">
    <h1>Criando páginas com jQuery</h1>
  </div>
  <div class="container mt-5">
    <div class="row div1">
      <div class="col-sm-4 coluna1">
        <p class="classA">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
        //
        <p class="classB"> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris... </p>
        <button id="dados" data-confirm="" data-iddocumento="189738" data-descricao="testte" type="button" class="btn btn-warning btn-xs 189738">Clique aqui</button>
        <ul>
          <li>Coffee</li>
          <li>Tea</li>
          <li>Milk</li>
        </ul>
      </div>
      <div class="col-sm-4 coluna2">
        <p class="classC">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
        <p class="classD">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
      </div>
      <div class="col-sm-4 coluna3">
        <p class="classE">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
        <p class="classF">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        <ul>
          <li>item 1</li>
          <li>item 2</li>
          <li>item 3</li>
        </ul>
      </div>
    </div>
    <div class="row div2">
      <h1>x caracteres</h1>
      <div class="col-12">
        <input class="contar" type="text" value="Vamos contar os caracteres?" /> 
        <button id="copiar" data-confirm="" data-iddocumento="189738" data-descricao="testte" type="button" class="btn btn-warning btn-xs 189738">Copiar</button>
      </div>
    </div>
    <div class="row div3">
      <ul>
        <li>C++</li>
        <li>JAVA</li>
        <li>Python</li>
        <li>HTML/CSS</li>
      </ul>
    </div>
  </div>
  <div class="container-fluid rodape"></div>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

下面是一个最基本的例子（最小化的样式和所需的元素，以便更好地关注您的问题），您需要根据具体的代码对其进行调整。
与var txt...一起使用的正则表达式将所有换行符替换为<br>，以便复制的文本保留其原始外观。
.trigger('keydown')用于模拟textarea元素的清除和字符计数器的更新。

$("#txt").on("keydown",function() {
  var len = $(this).val().length;
  $("#charNum").text(len);
});

$("#btnCopy").on("click",function() {
  var txt = $("#txt").val().replace(/(?:\r\n|\r|\n)/g, '<br>');
  
  $("#result").append(`
    <div class="copy">
      ` + txt + `
    </div>
  `);
  
  $("#btnClear").click();
});

$("#btnClear").on("click", function() {
  $("#txt").val('').trigger("keydown");
});

span, button {
  display: inline;
}
.copy {
  border: 1px solid black;
  margin-top: 15px;
  margin-left: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <span>Character count: </span>
  <span id="charNum">0</span>
</div>
<div>
  <textarea id="txt"></textarea>
</div>
<button id="btnCopy" type="button">Copy</button>
<button id="btnClear" type="button">Clear</button>
<div id="result"></div>

使用jquery创建textArea元素和复制按钮

1条答案

相关问题

热门标签

最新问答