Question

我有一个Access表单，在前一个文本框达到8位后插入一个输入字段。

This is how it looks before the user types something with 8 digits

When the textbox reaches the string limiter, it creates another input with the same properties and so on

如何使用JavaScript创建相同的项目？

当文本框达到其全长限制时，我需要添加另一个输入并按下“#t; tab”标签＆＃34;跳到下一个元素

这是我到目前为止所尝试的。

HTML

<input type="text" id="opNum_1"  onInput="checkLength(8,this)" onfocus="add_numOp(code);return false;" >

JAVASCRIPT

var counter = 1;
 function checkLength(len,ele){
  var fieldLength = ele.value.length;

  if(fieldLength <= len)
  {

  }
  else
  {
    $(this).keydown();
  }
}

function add_numOp(codigo){


$('#new_Ops_'+codigo+'').append(

        '<div id="opRol_'+codigo+'_'+counter+'" class="quantrolos_'+codigo+'" name="quantrolos_'+codigo+'[]">'+
        '<br/>'+
            '<input type="text" id="opNum_'+codigo+'_'+counter+'" onblur="add_numOp('+myCode+')" style=" margin-left: 28px; "><button type="button"  id="addOp" class="btn btn-rounded btn-default btn-icon" onclick="javascript:remove_op(opRol_'+codigo+'_'+counter+')" ><i  class="fa fa-minus"></i></button>'+
        '</div>'
    );
 counter++;

}

Answer 1

通过以编程方式定位元素并跟踪其状态，我们可以在任意数量的输入元素上重用处理程序。

＆＃13;

const form = document.querySelector('#our-form');
addListener(); // For our initial input event

function addListener() {
  getLastChild().addEventListener('keypress', handler);
}

const appendNewField = () => {
  const newField = form.appendChild(document.createElement('input'));
  newField.setAttribute('maxlength', '8');
  return newField;
}

function getLastChild() {
  return form.children[form.children.length - 1];
}

function handler(e) {
  // Ignore tab, backspace, etc https://regex101.com/r/gOSyKu/1
  if (e.target.value.length >= 7 && e.key.match(/^[0-9a-zA-Z]$/)) {
    // If we are also the last child, append a new sibling
    if (e.target === getLastChild()) {
      const newInput = appendNewField();
      addListener();
    }
    getLastChild().focus();
  }
}

＆＃13;

<form id="our-form">
  <input type="text" maxlength="8">
</form>

＆＃13;

Answer 2

从我能理解的内容，我只是使用全局计数变量对解决方案进行编码，以便更好地访问输入，并为选项卡功能调用focus（）。

var count=2;
function checkLength(e){
  if(e.value.length>=8){
    $('#'+e.closest("div").id).append("<input type='text' id='opNum_"+count+"' onInput='checkLength(this)' maxlength='8'>");
    $('#opNum_'+count).focus();
    count++;
  }
}

演示：http://jsbin.com/todadivivu/edit?html,js,output

以特定字符串长度附加文本框

2 个答案: