jQuery使用条形码阅读器切换到下一个字段 [英] jQuery to switch to next field using barcode reader

问题描述

因此，我现在有以下代码，一旦您开始输入一个新输入文本字段，它就会在检测到感叹号(！)时将光标移至下一个.但是，那 ！使用复制/粘贴功能或使用条形码阅读器填写字段时，未检测到标记.有什么办法解决这个问题?

So, I now have the following code that adds a new input text field once you start typing in one, and it moves the cursor to the next one when it detects an exclamation mark (!). However, the ! mark is not detected when using copy/paste function, or when using a barcode reader to fill the field. Is there any way to resolve this?

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

推荐答案

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

You can add a paste handler, splice the pasted text, and then set the values on the appropriate fields as demonstrated in this JSFiddle.

注释:

• 我将新的文本逻辑移到了一个新函数上，这样我就不必重复代码了.
• 您可以详细了解 在MDN上起作用.

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

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

这篇关于jQuery使用条形码阅读器切换到下一个字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！