一个已满时将数据输入移动到下一个字段 - JS制表 [英] Move data entry to the next field when one is full - JS tabulation

问题描述

我的脚本有问题..

用户需要向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）; 
 add class（active）; 
} else if（checkb === 4）{
 b.removeClass（active）; 
 c.addClass（active）; 
} 
 
 var $ this = $（this），
 character = $ this.html（）; 
 $（。active）。 html（）+ character）; 
}）; 
 
 $（'。delete'）。click（function（）{
 var html = $ write.html（）; 
 $ write.html（html.substr ，html.length  -  1））; 
 return false; 
}）; 
  

以下是演示：
http://jsfiddle.net/4m5fg/456/

解决方案

您的代码中有一些问题。

1. 使用 .removeClass 和 .addClass 函数你需要一个jQuery对象，但不是一个Node元素。


2. 一旦你输入4 A checka 仍然是 4 ，因此您需要检查 checkb == 0 。


3. 每次都需要获取当前的 .active ，但不仅仅是页面加载。因此，您需要在内点击事件中插入 var $ write = $（。active）; >


  var a = $（＃a），b = $（＃b），c = $ （＃c），$ write; $（'＃keyboard'）。click（function（）{var checka = $（'＃a'）。 ）.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'）。 $ write.html（html.substr（0，html.length  -  1））; if（$ write.html（）。length == 0）{$ write = $ write.prev（）;} return false; ;  

  .block {background：#fff;红色; 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 = aclass =block active>< / div>< div id =bclass =block active2>< / div>< div id =cclass =block >< / div>< div id =keyboard> A< / div>< span class =delete> DEL< / span>   

I have a problem with my script..

User needs to input data to a div and when one div is full (4 characters) the script should automatically move to the next field.

When working with inputs this works very good: http://jsfiddle.net/4m5fg/452/

But the problem is I want to enter data via virtual keyboard and I can't use focus any more.. So I have tried to input data to class specific div and once the div is full remove the class and add the class to the next div, but it doesn't work..

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;
});

Here is the demo: http://jsfiddle.net/4m5fg/456/

解决方案

You have some problems in your code.

1. To use .removeClass and .addClass functions you need a jQuery object but not a Node element.
2. Once you entered 4 A to the first div the checka is still 4 so you need to check if checkb == 0.
3. You need to get the current .active each time but not just in page load. So you need put var $write = $(".active"); inside the click event.

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>

这篇关于一个已满时将数据输入移动到下一个字段 - JS制表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！