javascript - 填满时将数据条目移动到下一个字段 - JS 制表

Question

我的脚本有问题..

用户需要向一个 div 输入数据，当一个 div 已满(4 个字符)时，脚本应自动移动到下一个字段。

在处理输入时，这非常有效: http://jsfiddle.net/4m5fg/452/

但问题是我想通过虚拟键盘输入数据，我不能再使用焦点了。所以我尝试将数据输入到类特定的 div，一旦 div 已满，删除类并添加类到下一个 div，但它不起作用..

var a = document.getElementById("a"),
    b = document.getElementById("b"),
    c = document.getElementById("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");
    } else if (checkb === 4) {
        b.removeClass("active");
        c.addClass("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));
    return false;
});

这是演示: http://jsfiddle.net/4m5fg/456/

Answer 1

检查这个fiddle

$(".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 并删除此类。找到当前 block 后，只需再次添加它即可。

最后，DEL 键 找到包含一些文本的最后一个 block 并删除最后一个字符。

编辑:New example with active class