当一个字段已满时，将数据条目移动到下一个字段-JS制表

检查这个小提琴

$(".keyboard").on("click", function() {
  $(".block").removeClass("active").filter(function() {
    return this.innerText.length < 4;
  }).first().addClass("active").append(this.innerText);
});
$(".delete").on("click", function() {
  var inputs = $(".block").removeClass("active").filter(function() {
    return this.innerText.length > 0;
  }).last().addClass("active").html(function() {
    return this.innerText.substr(0, this.innerText.length - 1);
  });
});

如果你正在构建一个虚拟键盘，我建议使用class而不是id。这样，每个.keyboard将变成key，并且可以容易地被选择到输入中。

使用this.innerText.length可以检查输入是否完整。。此外，您还可以使用一些已经具有的属性来更改4，并使代码更加动态。

要更改"活动类"，只需找到所有.blocks并删除该类即可。。找到当前块后，只需再次附加它。

最后，DEL Key找到带有一些文本的最后一个块，并删除最后一个字符。

EDIT：具有活动类的新示例

您的代码中存在一些问题。

1. 要使用.removeClass和.addClass函数，您需要一个jQuery对象，但不需要Node元素
2. 在第一个div中输入4个A后，checka仍然是4，因此需要检查是否为checkb == 0
3. 您每次都需要获得当前的.active，但不仅仅是在页面加载中。因此，您需要将var $write = $(".active");放入click事件中

var a = $("#a"),
    b = $("#b"),
    c = $("#c"),
    $write;
$('#keyboard').click(function(){
  var checka = $('#a').html().length;
  var checkb = $('#b').html().length;
  if (checka === 4 && checkb === 0) {
    a.removeClass("active");
    b.addClass("active");
  }
  else if (checkb === 4) {
    b.removeClass("active");
    c.addClass("active");
  }
  $write = $(".active");
  var $this = $(this),
      character = $this.html();
  $(".active").html($write.html() + character);
});
$('.delete').click(function() {
  var html = $write.html();
  $write.html(html.substr(0, html.length - 1));
  
  if ($write.html().length == 0) {
      $write = $write.prev();
  }
  
  return false;
});

.block {
  background: #fff; 
  color: red; 
  border: 0; 
  width: 45px; 
  height: 20px; 
  padding: 10px; 
  float: left; 
  margin: 5px;
}
input:focus, textarea:focus {
  outline: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a" class="block active" ></div>
<div id="b" class="block active2"  ></div>
<div id="c" class="block" ></div>
<div id="keyboard">A</div>
<span class="delete">DEL</span>

您在这里有一些错误是修复代码：

var a = $("#a"),
    b = $("#b"),
    c = $("#c");
    var $write = $(".active");
$('#keyboard').click(function(){
  var checka = $('#a').html().length;
  var checkb = $('#b').html().length;
  if (checka === 4) {
    a.removeClass("active");
    b.addClass("active");
    $write = b;
  }
  if (checkb === 4) {
    b.removeClass("active");
    c.addClass("active");
    $write = c;
  }
  var $this = $(this),
      character = $this.html();
  $(".active").html($write.html() + character);

});
$('.delete').click(function() {
    var html = $write.html();
  if (html.length == 0) {
    if ($write.is('#c')) {
        $write.removeClass('active');
        $write = b;
      $write.addClass('active');
    } else if ($write.is('#b')) {
        $write.removeClass('active');
        $write = a;
      $write.addClass('active');
    }
    html = $write.html();
  }
  $write.html(html.substr(0, html.length - 1));
  return false;
});

JSFIDDLE