Question

我的脚本有问题..

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

使用输入时，这非常有用： http://jsfiddle.net/4m5fg/452/

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

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">

<include
    layout="@layout/app_bar_main2"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <include layout="@layout/nav_header_main2"/>
        <ListView
            android:id="@+id/lst_menu_items"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:divider="@null"
            android:dividerHeight="0dp"/>
        </LinearLayout>
    <!--app:headerLayout="@layout/nav_header_main2"
    app:menu="@menu/activity_main2_drawer" >-->
    </android.support.design.widget.NavigationView>

以下是演示： 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并删除此类..找到当前块后再添加它。

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

编辑：New example with active class

Answer 2

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

这里有一些错误是固定代码：

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

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

3 个答案: