.next()(Jquery)不会定位或聚焦组中的下一个项目

xt0899hw  于 2023-05-17  发布在  jQuery
关注(0)|答案(1)|浏览(144)

我试图开发一个指定为14位数的数字字段范围。我跌跌撞撞地跳到下一个输入字段(像一个密码系统)

<div class="input-group single-digits GTIN">
    <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
    <span class="input-group-glue"></span>
    <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
    <span class="input-group-glue"></span>
    <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
    <span class="input-group-glue"></span>
    <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
    <span class="input-group-glue"></span>
    <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
    <span class="input-group-glue"></span>
    <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
    <span class="input-group-glue"></span>
    <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
    <span class="input-group-glue"></span>
    <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
    <span class="input-group-glue"></span>
    <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
    <span class="input-group-glue"></span>
    <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
    <span class="input-group-glue"></span>
    <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
    <span class="input-group-glue"></span>
    <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
    <span class="input-group-glue"></span>
    <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
    <span class="input-group-glue"></span>
    <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
    <span class="input-group-glue"></span>
    <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
    <span class="input-group-glue"></span>
    <div class="input-group-btn">
        <button type="button" id="generate-ean-from-list" class="btn btn-default" data-action="assign-result-ean">
            <span class="fa fa-dice font-size-16" aria-hidden="true"></span>
        </button>
        <button rel="tooltip" class="btn btn-default" data-toggle="tooltip" data-trigger="hover" data-placement="left" title="Global Trade Item Number, an unique 14 digit number, that can be applied to all products. More info at GS1">
            <span class="fa fa-question-circle font-size-16" aria-hidden="true"></span>
        </button>
        <button type="button" class="btn btn-default lock-field" data-action="lock-field" data-fieldname="GTIN" data-status="unlocked">
            <span class="fa fa-unlock font-size-16" aria-hidden="true"></span>
        </button>
    </div>
</div>

它的javascript如下(运行在jquery上)

$('body').on('input', '.single-digit', function(){
    if($(this).val().length==$(this).attr("maxlength")){
        $(this).next('.single-digit').focus();
    }
});

但由于某种原因,我不能弄清楚,我不能让它工作,我知道它进入了if语句,但似乎还没有找到下一个.single-digit类并使其跳转到它。这与组中的跨距有关吗?我想我可以,因为它都是彼此的兄弟姐妹,所以可以跳到下一个.single-digit类。
一个JSfiddle到这里来看看问题。https://jsfiddle.net/Ltdqgp40/1/

tcbh2hod

tcbh2hod1#

问题是next(selector)的工作方式与您预期的不同,但它仍按设计工作。

next('.single-digit')

将选择下一个元素 * 如果 * 它匹配提供的选择器,这-因为<span>是下一个元素-它显然不能。
相反,您可以用途:

// this is mostly as you wrote it originally, binding
// the anonymous function of the on() method as the
// event-handler for the 'input' event when triggered
// on a .single-digit element:
$('body').on('input', '.single-digit', function(){

    // here we check the value entered into the
    // specific element that triggered the event-
    // handler, comparing it against the 'maxlength'
    // attribute-value:
    if($(this).val().length==$(this).attr("maxlength")){
      // here we navigate from the 'this' node:
      $(this)
        // select all subsequent siblings that
        // match the supplied selector:
        .nextAll('.single-digit')
        // retrieve the first matching element from
        // that collection:
        .first()
        // and focus that element:
        .focus();
    }
});

具体如下:

$('body').on('input', '.single-digit', function() {
  if ($(this).val().length == $(this).attr("maxlength")) {
    $(this).nextAll('.single-digit').first().focus();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group single-digits GTIN">
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <div class="input-group-btn">
    <button type="button" id="generate-ean-from-list" class="btn btn-default" data-action="assign-result-ean">
            <span class="fa fa-dice font-size-16" aria-hidden="true"></span>
        </button>
    <button rel="tooltip" class="btn btn-default" data-toggle="tooltip" data-trigger="hover" data-placement="left" title="Global Trade Item Number, an unique 14 digit number, that can be applied to all products. More info at GS1">
            <span class="fa fa-question-circle font-size-16" aria-hidden="true"></span>
        </button>
    <button type="button" class="btn btn-default lock-field" data-action="lock-field" data-fieldname="GTIN" data-status="unlocked">
            <span class="fa fa-unlock font-size-16" aria-hidden="true"></span>
        </button>
  </div>
</div>

JS Fiddle demo
值得注意的是,上面的内容在纯JavaScript中是完全可能的:

// utility functions, mostly to reduce typing and facilitate an easier work flow:
const D = document,
  // this function takes a selector and a 'context' node, the context is set to
  // 'D' (the document) by default, but any other element could be used instead
  // to switch from document.querySelector() to Element.querySelector(); in
  // either case the selector is passed to the function and the resuling
  // Node is returned:
  get = (selector, context = D) => context.querySelector(selector),
  // as above, but here we use querySelectorAll(), and pass that NodeList to
  // an Array-literal with the spread syntax, to convert the iterable
  // NodeList to an Array of nodes:
  getAll = (selector, context = D) => [...context.querySelectorAll(selector)],
  // this function takes a node and a CSS selector (which is '*' (universal
  // selector) by default):
  getNextSiblings = (node, selector = '*') => {
    // we retrieve all children (element-children) of the parentNode, using
    // Element.children, and convert that collection into an Array of
    // Elements:
    let allChildren = [...node.parentNode.children],
      // here first slice the Array of allChildren from the index
      // of the passed-in node plus 1, so that we take a subset of
      // the allChildren Array starting with the next-element:
      subsequentSiblings = allChildren.
    slice(allChildren.findIndex((el) => node === el) + 1)
      // we then filter that Array:
      .filter(
        // retaining only those elements that match the
        // selector (if no selector is passed in, then the
        // universal selector is used):
        (el) => el.matches(selector)
      );
    // we then return the Array of subsequent sibling element nodes:
    return subsequentSiblings;
  };

// a simple named function to handle the 'input' events:
const inputHandler = (evt) => {
  // we use destructuring assignment to retrieve the event.target
  // from the evt Object (passed automatically from
  // EventTarget.addEventListener()):
  let {
    target
  } = evt, {
    // and again to retrieve both the value of the target element,
    // and also its maxLength property-value:
    value,
    maxLength
  } = target;

  // if the target matches the supplied selector
  if (target.matches('.single-digit')) {
    // we retrieve the first element after the current element that
    // matches the selector, this returns an Array and we want only
    // the first, so we use bracket-notation to retrieve that first
    // Array-element:
    let firstMatch = getNextSiblings(target, '.single-digit')[0];

    // if the maxLength is equal to the length of the trimmed-value
    // (String.prototype.trim() removes leading and trailing white-
    // space), so here we check that the length is equal to maxLength
    // and the value is not white-space, and we also check that
    // there is firstMatch element (this matters if the current
    // element is the last-sibling for example):
    if (maxLength === value.trim().length && firstMatch) {
      // we then focus the firstMatch element:
      firstMatch.focus();
    } else {
      // if the above doesn't match, then we select the current
      // target:
      target.select();
    }
  }
  // if the element doesn't match the selector, we return false:
  return false;
}

// retrieving the <body> element, and using EventTarget.addEventListener()
// to bind the inputHandler() function (note the deliberately omitted
// parentheses) as the handler for the 'input' event:
get('body').addEventListener('input', inputHandler);
<div class="input-group single-digits GTIN">
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <div class="input-group-btn">
    <button type="button" id="generate-ean-from-list" class="btn btn-default" data-action="assign-result-ean">
            <span class="fa fa-dice font-size-16" aria-hidden="true"></span>
        </button>
    <button rel="tooltip" class="btn btn-default" data-toggle="tooltip" data-trigger="hover" data-placement="left" title="Global Trade Item Number, an unique 14 digit number, that can be applied to all products. More info at GS1">
            <span class="fa fa-question-circle font-size-16" aria-hidden="true"></span>
        </button>
    <button type="button" class="btn btn-default lock-field" data-action="lock-field" data-fieldname="GTIN" data-status="unlocked">
            <span class="fa fa-unlock font-size-16" aria-hidden="true"></span>
        </button>
  </div>
</div>

参考文献:
JavaScript:

相关问题