最适合链接输入或插件的离子组件

时间:2018-07-11 00:59:49

标签: ionic-framework ionic3

我正在基于ionic 3构建一个应用程序,并且UI提案使用此视图来验证SMS。

有没有使用4个不同输入并将它们与JS链接的方法吗?插件或其他东西?

UI Proposal

预先感谢

1 个答案:

答案 0 :(得分:0)

找到了类似的codepen

https://codepen.io/nirarazi/pen/ZGovQo

但是魔术在js中

    $(function() {
  'use strict';

  var body = $('body');

  function goToNextInput(e) {
    var key = e.which,
      t = $(e.target),
      sib = t.next('input');

    if (key != 9 && (key < 48 || key > 57)) {
      e.preventDefault();
      return false;
    }

    if (key === 9) {
      return true;
    }

    if (!sib || !sib.length) {
      sib = body.find('input').eq(0);
    }
    sib.select().focus();
  }

  function onKeyDown(e) {
    var key = e.which;

    if (key === 9 || (key >= 48 && key <= 57)) {
      return true;
    }

    e.preventDefault();
    return false;
  }

  function onFocus(e) {
    $(e.target).select();
  }

  body.on('keyup', 'input', goToNextInput);
  body.on('keydown', 'input', onKeyDown);
  body.on('click', 'input', onFocus);

})