Question

我有这个脚本，当前一个文本字段被填充时自动生成一个新的文本字段，然后当用户键入感叹号时自动将光标前进到下一个字段。这很好用。现在，我想在最后一个文本字段下面添加一行，显示已创建并具有内容的这些输入框的数量。有什么帮助吗？

<div id="myDiv">
    <input type="text" name="qr[]" id="txt_1" class="qr" autofocus />
</div>
<script>
$('#myDiv').on('keyup', 'input', function(e) {
  if ($(this).val() == '') {
    $(this).next().remove();
    return;
  } else if ($(this).next().val() == '') {
    if (e.keyCode === 49 && e.shiftKey) {
      $(this).next().focus();
    }
    return;
  }

  addNewTxt($(this));
});

$('#myDiv').on('paste', 'input', function(e) {
  e.preventDefault();
  var text = (e.originalEvent || e).clipboardData.getData('text/plain');

  if (!text) {
    return;
  }

  var textSections = text.split('!');

  $(this).val(textSections[0]);
  var lastEl;
  for (var i = 1; i < textSections.length; i++) {
    lastEl = addNewTxt($(this), textSections[i]);
  }

  lastEl.focus();
});

function addNewTxt(el, val) {
  var newTxt = el.clone();
  var id = newTxt.attr('id');
  newTxt.attr('id', 'txt_' + (parseInt(id.substring(id.indexOf('_') + 1))));
  newTxt.val(val || '');
  el.parent().append(newTxt);

  return newTxt;
}</script>

Answer 1

这是我要做的。

首先在包含输入的div下面添加一个div：

<div id="myDiv">
    <input type="text" name="qr[]" id="txt_1" class="qr" autofocus />
</div>
<div id="numInputs">
    Number of inputs: 1
</div>

然后在你的javascript中做一些事情：

添加一个var来跟踪输入的数量 - 将其初始化为1

var numInputs = 1;

添加输入增量后，var

numInputs++;

在增加var之后使用jquery更改numInputs div的html以向用户显示数字

$('#numInputs').html("Number of inputs: " + numInputs);

使用jQuery计算带有值的输入字段数

1 个答案: