Question

我有四个最大长度为4的文本框但是，用户可以输入ABC5 12T4 45R7 78RT nd如果用户复制完整的16位数字，即ABC512T445R778RT并粘贴在第一个文本框中，剩下的文本应该添加到第2，第3和第4个文本框中

Answer 1

提供了这样的html代码：

<input type="text"><input type="text"><input type="text"><input type="text">

您可以尝试这样的事情：

var inputs = document.querySelectorAll('input');
var inputsArray = [].slice.call(inputs);

inputsArray.forEach(bindInputEvent);

function bindInputEvent(node) {
    node.addEventListener('input', function (e) {
        var startingField = inputsArray.indexOf(e.target);
        if (e.target.value.length > 4) {
            fillFields(this.value, startingField);
        }
    })
};

function fillFields(code, startingField) {
    inputsArray.slice(startingField).forEach(function (item, iter) {
        item.value = code.slice(iter * 4, iter * 4 + 4);
    });
}

以下是一个有效的例子：http://jsfiddle.net/jcphevg4/

修改

上面的代码适用于IE＆gt; 8。如果您需要支持旧版浏览器（Internet Explorer 8及更早版本），我会建议您使用jQuery。代码如下所示：

var inputs = $('.code-input'); $(function () { inputs.on('input', function () { var startingField = $(this).prevAll('.code-input').length; if (this.value.length > 4) { fillFields(this.value, startingField); } }); }); function fillFields(code, startingField) { inputs.slice(startingField).each(function (iter) { this.value = code.slice(iter * 4, iter * 4 + 4); }); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" class="code-input"> <input type="text" class="code-input"> <input type="text" class="code-input"> <input type="text" class="code-input">

Answer 2

您可以尝试使用模糊事件：

var codes;
$(function() {
  codes = $('input.code'); // cache all inputs
  codes.eq(0).on('change', splitCode); // first textbox input handler
  codes.on('change', validateCode); // reset for restricting max 4 characters
});

var validateCode = function() { // restricting max 4 characters
  this.value = this.value.slice(0, 4).toUpperCase();
};

var splitCode = function() {
  var txt = this.value.toUpperCase();
  if(16 > txt.length) { // less than 16, not sufficient to fill the reset
    this.value = txt.slice(0, 4);
    return;
  }
  $.each(codes, function(i){
    this.value = txt.slice(i*4, (i + 1)* 4);
  });
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" class='code' />
<input type="text" class='code' />
<input type="text" class='code' />
<input type="text" class='code' />

Javascript文本框值附加和焦点

2 个答案: