将输入拆分到单独的框中

Question

我希望将输入分成单独的 character/digit 个框，like this photo

理想情况下，输入一个数字会将您带到下一个输入框，并且每个输入框都会用活动边框单独突出显示。我可以结合使用样式和 Javascript 来完成此操作。

任何见解都会非常有帮助！提前致谢。

Answer 1

这是实现此模式的一种方法：

HTML:

<div class="digits">
  <input type="text" maxlength="1" name="digit1" />
  <input type="text" maxlength="1" name="digit2" />
  <input type="text" maxlength="1" name="digit3" />
  <input type="text" maxlength="1" name="digit4" />  
</div>

CSS:

input {
  font-size: 2rem;
  width: 1.5rem;
  text-align: center;
}
input:focus {
  border: 2px solid yellowgreen;
  outline: none;
}

JAVASCRIPT:

// Listen on the 'input' event inside the .digits area:
document.querySelector(".digits").addEventListener("input", function(e){

  // Exclude non-numeric characters from input:
  e.target.value = e.target.value.replace(/[^0-9]/g,'');

  // If the input value is filled and there is a neighbouring element that is input, then focus on that element:
  if ( e.target.value !== "" && e.target.nextElementSibling && e.target.nextElementSibling.nodeName === "INPUT" ){

    e.target.nextElementSibling.focus();

  }

});

2) 如果您希望输入值在已填充时更新：

<div class="digits">
  <input type="text" name="digit1" />
  <input type="text" name="digit2" />
  <input type="text" name="digit3" />
  <input type="text" name="digit4" />  
</div>

document.querySelector(".digits").addEventListener("input", function(e){
  e.target.value = e.data.replace(/[^0-9]/g,'');
  if ( e.target.value !== "" && e.target.nextElementSibling && e.target.nextElementSibling.nodeName === "INPUT" ){
    e.target.nextElementSibling.focus();
  } 
});

document.querySelector("input").focus();
document.querySelector(".digits").addEventListener("input", function({ target, data }){

  // Exclude non-numeric characters (if a value has been entered)
  data && ( target.value = data.replace(/[^0-9]/g,'') );
  
  const hasValue = target.value !== "";
  const hasSibling = target.nextElementSibling;
  const hasSiblingInput = hasSibling && target.nextElementSibling.nodeName === "INPUT";

  if ( hasValue && hasSiblingInput ){

    target.nextElementSibling.focus();
  
  } 

});

input {
  font-size: 3rem;
  width: 2.6rem;
  border: 2px solid #aaa;
  text-align: center;
  box-shadow: 0 0 8px rgba(0,0,0,0.25);
}
input:focus {
  border: 2px solid yellowgreen;
  outline: none;
}

/* DECORATION */

input:focus {
  animation-name: zoom;
  animation-duration: 200ms;
}

@keyframes zoom {
  from {
    
  }
  to {
    transform: scale(2);
  }
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: lightgray;
}

.digits {
  padding: 20px;
  display: inline-block;
}

<div class="digits">
  <input type="text" name="digit1" />
  <input type="text" name="digit2" />
  <input type="text" name="digit3" />
  <input type="text" name="digit4" />  
  <input type="text" name="digit5" />  
</div>

Codepen （包含一些额外的验证和效果）

将输入拆分到单独的框中

Split input into separate boxes

html

javascript

css

input

styling