1

コードを構成する文字数制限が設定された複数のテキストボックスがあります。さまざまな理由で分離されたボックスには価値があります。最初のテキストボックスに完全なコードを貼り付けて、すべてのテキストボックスに自動的に入力できるようにしたいと思います。この場合、javascriptまたはjqueryライブラリでこれを行う方法はありますか？

現在、各テキストボックスでjQuery自動タブを使用しており、その機能を維持したいと考えています。

4

2 に答える 2

1

あなたは確かにJSでこれを行うことができます。私はあなたのためにそれをするための図書館について知りません。ここで腰から撃ちますが、多分このようなものです：

HTMLの例

<input type='text' data-auto-pop='true' data-group='1' data-char-limit='3'/>
<input type='text' data-auto-pop='true' data-group='1' data-char-limit='3'/>
<input type='text' data-auto-pop='true' data-group='1' data-char-limit='4'/>

JSの例

$("input[data-auto-pop='true']").change(function () {
  var $this = $(this), val = $this.val();
  if ($this.data("char-limit") > val.length) {
    return;
  } else {
    var setVal = function() {
      $this.val(val.slice(0, $this.data("char-limit"));
      val = val.slice($this.data("char-limit"));
    };
    setVal();
    while ($this.closest("input[data-group='"+$this.data("group")+"']") && val.length > 0) {
      $this = $this.closest("input[data-group='"+$this.data("group")+"']");
      setVal();
    }
  }
}

おそらくいくつかの間違いがありますが、あなたはその考えを理解する必要があります。

于 2012-11-27T23:10:21.383 に答える
1

デモ

onpasteイベントを使用して、ユーザーのクリップボードからデータをキャプチャします。次に、そのデータを取得して、入力に適した配列を生成します。次に、.val（）を使用してこれらの値を設定します

JS

$(function(){

    // get first input element
    pastable = document.getElementById('pastable');          
    // listen for the user to paste
    pastable.onpaste = function(e){
        // retrieve paste data as an array split to each 3 characters (3 dots below in regex)
        var inputArray = e.clipboardData.getData('text/plain').match(/.../g);
        // loop over input fields
        $('input').each(function(i){
             // place data from paste
             $(this).val(inputArray[i]);                
        });
    };

});​

HTML

<input type='text' id="pastable" maxlength="3"/>
<input type='text' maxlength="3" />
<input type='text' maxlength="3" />​
于 2012-11-27T23:30:23.067 に答える