如何将输入值组合在一起

Question

我正在尝试组合输入值。以下是我的工作代码，不胜感激。

这是我的代码：

getCodeBoxElement(index) {
  return document.getElementById("codeBox" + index);
}

onKeyUpEvent(index, event) {
  const eventCode = event.which || event.keyCode;
console.log((<HTMLInputElement>this.getCodeBoxElement(index)).value);
  if ((<HTMLInputElement>this.getCodeBoxElement(index)).value.length === 1) {
    if (index !== 6) {
      this.getCodeBoxElement(index + 1).focus();

    } else {
      this.getCodeBoxElement(index).blur();
      // Submit code
      // for(var i=0; i<6; i++){

      //           this.verificationCode = (<HTMLInputElement>this.getCodeBoxElement(i)).toString;
      //           console.log(this.verificationCode);

      // }
      console.log("submit code ");
    }
  }
  if (eventCode === 8 && index !== 1) {
    this.getCodeBoxElement(index - 1).focus();
  }
}

onFocusEvent(index) {
  for (var item = 1; item < index; item++) {
    const currentElement = this.getCodeBoxElement(item);
    if (!(<HTMLInputElement>currentElement).value) {
      currentElement.focus();
      break;
    }
  }
}

 /*     Body Styling only end     */
section {
  display: flex;
  /* align-items: center;
    width: 100vw;
    height: 100vh; */
  text-align: center;
}
section form {
  display: flex;
  align-items: center;
  width: auto;
  margin-left: 12px;
  /* margin: 0 auto; */
}
section form input {
  width: 40px;
  height: 40px;
  text-align: center;
  margin-left: -10px;
  border: none;
  border-radius: 10px;
}
section form input:last-child {
  margin-right: 0;
}
section form input::-webkit-inner-spin-button,
section form input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
section form input:focus,
section form input.focus {
  border-color: green;
  outline: none;
  box-shadow: none;
}

<section>
    <form style="margin-top: 10px;">
        <input id="codeBox1" type="text" maxlength="1" (keyup)="onKeyUpEvent(1, $event)"
            (focus)="onFocusEvent(1)" autocomplete="off">
        <input id="codeBox2" type="text" maxlength="1" (keyup)="onKeyUpEvent(2, $event)"
            (focus)="onFocusEvent(2)" autocomplete="off">
        <input id="codeBox3" type="text" maxlength="1" (keyup)="onKeyUpEvent(3, $event)"
            (focus)="onFocusEvent(3)" autocomplete="off">
        <input id="codeBox4" type="text" maxlength="1" (keyup)="onKeyUpEvent(4, $event)"
            (focus)="onFocusEvent(4)" autocomplete="off">
        <input id="codeBox5" type="text" maxlength="1" (keyup)="onKeyUpEvent(5, $event)"
            (focus)="onFocusEvent(5)" autocomplete="off">
        <input id="codeBox6" type="text" maxlength="1" (keyup)="onKeyUpEvent(6, $event)"
            (focus)="onFocusEvent(6)" autocomplete="off">
        <!-- <input id="codeBox5" type="text" maxlength="1" (keyup)="onKeyUpEvent(5, $event)"
            (focus)="onFocusEvent(5)" autocomplete="off">
        <input id="codeBox6" type="text" maxlength="1" (keyup)="onKeyUpEvent(6, $event)"
            (focus)="onFocusEvent(6)" autocomplete="off"> -->
    </form>
</section>

Answer 1

默认情况下，输入将输入的值作为字符串返回...因此，默认情况下，连接这些值会将它们组合在一起...如果您想像数字一样添加它们，您可以需要将值解析为整数...否则您可以使用加号 + => input.value + input2.value 简单地组合它们的值。即使是输入类型 number 值也会返回一个字符串，因此通过将这些值连接在一起，您会将它们的值组合成一个字符串，这将包括带有 typeof = string 的数字。

请参阅我的示例输入及其输出以供参考...

编辑： 对于您的问题，您可以创建一个数组来通过函数中的迭代来保存每个输入的值...一旦达到阈值有条件的，加入你的数组的值。

// create an array to hold your values
let code = new Array;
function onKeyUpEvent(index, event) {
  const eventCode = event.which || event.keyCode; 
  if (getCodeBoxElement(index).value.length === 1) {

     // save the value within your array with each selection
     code[index] = getCodeBoxElement(index).value    
     if (index !== 4) {
        getCodeBoxElement(index+ 1).focus();
     } else {
        getCodeBoxElement(index).blur();         
        // Submit code
        // join the array values into a string using .join('');
        let codeString = code.join('')
        console.log(codeString)
     }
  }
  if (eventCode === 8 && index !== 1) {
     getCodeBoxElement(index - 1).focus();
  }
}

function getCodeBoxElement(index) {
  return document.getElementById('codeBox' + index);
}
let code = new Array;

function onKeyUpEvent(index, event) {
  const eventCode = event.which || event.keyCode;
  if (getCodeBoxElement(index).value.length === 1) {
    //code[index] = getCodeBoxElement(index).value also works
    code.push(getCodeBoxElement(index).value)
    if (index !== 4) {
      getCodeBoxElement(index + 1).focus();
    } else {
      getCodeBoxElement(index).blur();
      // Submit code
      let codeString = code.join('');
      let display = document.getElementById('display')
      display.style.color = 'darkgreen';
      display.textContent = `You have entered: ${codeString}`;
    }
  }
  if (eventCode === 8 && index !== 1) {
    getCodeBoxElement(index - 1).focus();
  }
}

function onFocusEvent(index) {
  for (item = 1; item < index; item++) {
    const currentElement = getCodeBoxElement(item);
    if (!currentElement.value) {
      currentElement.focus();
      break;
    }
  }
}

// Body Styling only Begin ==============
body {
  text-align: center;
  background-color: lightcyan;
  font-family: 'POPPINS', Open-Sans;
  background: linear-gradient(to right, #4568dc, #b06ab3);
}

::selection {
  color: #8e44ad;
}

// Body Styling only End ================
// Container-fluid Styling only Begin ===
.container-fluid {
  .row {
    align-items: center;
    width: 100vw;
    height: 100vh;
  }
}

// Container-fluid Styling only End =====
// =====
// Passcode-wrapper Styling only Begin ==
.passcode-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: auto;
  margin: 0 auto;
  input {
    width: 50px;
    height: 50px;
    padding: 0;
    margin-right: 5px;
    text-align: center;
    border: 1px solid gray;
    border-radius: 5px;
    &:last-child {
      margin-right: 0;
    }
    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button {
      -webkit-appearance: none;
      appearance: none;
      margin: 0;
    }
    &:focus,
    &.focus {
      border-color: green;
      outline: none;
      box-shadow: none;
    }
  }
}

// Passcode-wrapper Styling only End ====

<section class="container-fluid">
  <div class="row">
    <div class="col-md-8 offset-md-2">
      <form class="text-center">
        <div class="form-group">
          <label for="password" class="text-white">Enter 4 Digit Password</label>
          <div class="passcode-wrapper">
            <input id="codeBox1" type="number" maxlength="1" onkeyup="onKeyUpEvent(1, event)" onfocus="onFocusEvent(1)">
            <input id="codeBox2" type="number" maxlength="1" onkeyup="onKeyUpEvent(2, event)" onfocus="onFocusEvent(2)">
            <input id="codeBox3" type="number" maxlength="1" onkeyup="onKeyUpEvent(3, event)" onfocus="onFocusEvent(3)">
            <input id="codeBox4" type="number" maxlength="1" onkeyup="onKeyUpEvent(4, event)" onfocus="onFocusEvent(4)">
          </div>
        </div>
      </form>
    </div>
  </div>
</section>
<div id="display"></div>