Question

我需要你的帮助。我使用 textarea ，通过更改行数自动扩展。在我的项目中，页面不会重新加载并在提交表单后保持不变。我需要动态更改提交时的行数（2）。也可以通过Enter发送表单。所以我需要在按下按钮或按Enter键后更改行数。我编写了一个粗略的草图，其中包含了我在项目中的表单，以便您可以对其进行测试：https://codepen.io/C3La-NS/pen/NagZbr

<form id="NewMessage">
  <textarea id="shoutbox-comment" data-min-rows="2"></textarea>
  <button id="send_message" type="submit" onclick="chatSubmit();">send</button>
</form>

JS：

    // auto-resizing textarea
const textarea = document.getElementById("shoutbox-comment");

textarea.addEventListener("input", function() {
  this.rows = 2; // Erm...
  this.rows = countRows(this.scrollHeight);
});

function countRows(scrollHeight) {
  return Math.floor(scrollHeight / 20); // 20px = line-height: 1.25rem
}

// submit by Enter
$(document).ready(function() {
  $("#shoutbox-comment").on("keypress", function(event) {
    if (event.keyCode == 10 || event.keyCode == 13) {
      event.preventDefault();
      chatSubmit();
    }
  });
});

// submit FORM
function chatSubmit() {
  $("#NewMessage").submit();
}

谢谢！

Answer 1

jQuery将accept作为参数提交给在提交之前触发的回调，你可以这样做：

$("#NewMessage").submit(function( event ) {
  event.preventDefault();
  $('#shoutbox-comment').attr('rows', 2);
});

Answer 2

您的脚本中只有几处更改：

const textarea = $("#shoutbox-comment");
const minRows = textarea.data('minRows');

textarea.on("input", function(e) {
    this.rows = 1; // Erm...
    this.rows = countRows(this.scrollHeight);
});

function countRows(scrollHeight) {
    var toReturn = Math.floor(scrollHeight / 20); // 20px = line-height: 1.25rem
    return toReturn > minRows ? toReturn : minRows;
}

// submit by Enter
$(document).ready(function() {
    $("#shoutbox-comment").on("input", function(e) {
        if (e.keyCode == 10 || e.keyCode == 13) {
          e.preventDefault();
          chatSubmit();
        }
    });
});

// submit FORM
function chatSubmit() {
    // Send the message via AJAX;
    textarea.val('').trigger('input');
    return false;
}

#shoutbox-comment {
    width: 220px;
    outline: none;
    resize: none;
    line-height: 20px;
    overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="NewMessage">
    <textarea id="shoutbox-comment" data-min-rows="2"></textarea>
    <button id="send_message" type="submit" onclick="chatSubmit();">send</button>
</form>

我还在脚本中包含了data-min-rows属性。同样在CodePen。

在提交时动态更改行数

2 个答案: