jQuery使用条形码阅读器切换到下一个字段

Question

所以，我现在有以下代码，一旦你开始输入一个新的输入文本字段，它会在检测到感叹号（！）时将光标移动到下一个。然而 ！使用复制/粘贴功能或使用条形码阅读器填充字段时未检测到标记。有什么方法可以解决这个问题吗？

$('#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;
    }

    var newTxt = $(this).clone();
    var id = newTxt.attr('id');
    newTxt.attr('id', 'txt_' + (parseInt(id.substring(id.indexOf('_') + 1))));
    newTxt.val('');
    $(this).parent().append(newTxt);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="myDiv">
    <input type="text" name="qr[]" id="txt_1" autofocus />
</div>

Answer 1

您可以添加粘贴处理程序，拼接粘贴的文本，然后在相应字段中设置值，如 JSFiddle 中所示。

备注：

• 我将新文本逻辑移动到一个新函数，这样我就不必重复代码了。
• 您可以详细了解split function on MDN。

＆＃13;

＆＃13;

$('#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;
}

＆＃13;

<div id="myDiv">
  <input type="text" name="qr[]" id="txt_1" autofocus />
</div>

＆＃13;

＆＃13;

＆＃13;