如何使用jquery在keyup上添加新值，使其每n位div一次？

nhaq1z21 于 2021-09-13 发布在 Java

关注(0)|答案(1)|浏览(301)

我想在用户每次输入3位数字时自动列出数字。输入的数字应显示在 div 自动地

$("#lister").on("keyup", function() {
  var mxlen = $(this).data("mxlen");
  var input = $(this).val();
  if (input.length == mxlen) { //if input==3
    $('#num_list').append('<li>' + input + '</li>');
    $(this).html(''); //clear input after appended
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="num_list"></div>
<input type="number" id="lister" data-mxlen="3" />

我的代码的问题是，它重复相同的数字，并且在追加后不清除输入。

jquery JavaScript Html

来源：https://stackoverflow.com/questions/68489472/how-to-add-new-value-on-keyup-to-div-every-n-digit-with-jquery

1条答案

按热度按时间

nlejzf6q1#

你的代码就快到了，你只需要使用 val('') 重置该值。
还请注意，您可以通过使用 slice(0, mxlen) 快速键入时将值限制为3个字符，并将检查更改为 == 到 >= 出于同样的原因。

$("#lister").on("input", function() {
  let $el = $(this);
  var mxlen = $el.data("mxlen");
  var input = $el.val();

  if (input.length >= mxlen) {
    $('#num_list').append('<li>' + input.slice(0, mxlen) + '</li>');
    $el.val('');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="num_list"></div>
<input type="number" id="lister" data-mxlen="3" />

最后要注意的一点是，诸如 - 或 e 对于在 type="number" 输入字段，但它们对于该字段返回的值无效。因此 length 使用这些字符时，check将获得不一致的输出。
根据您的用例，使用标准可能会更好 type="text" 检查并手动将输入限制为数值。

赞(0）回复(0）举报 2021-09-13

我来回答

如何使用jquery在keyup上添加新值，使其每n位div一次？

1条答案

相关问题

热门标签

最新问答