如何在沒有JavaScript的情況下創建4位輸入系列？

我有一個表單輸入，我想在其中輸入一個四位數字（驗證碼）。我的問題是，在輸入第四個數字后，PIN 碼的結構和順序就被破壞了。因為文本指標指向第五個字符，而我已經定義了四個字符。

有沒有辦法用純 CSS 解決這個問題？或者至少使用純 JavaScript？

.pinBox {
  display: inline-block;
  overflow: hidden;
  position: relative;
  direction: ltr;
  text-align: left;
}

.pinBox:before {
  position: absolute;
  left: 0;
  right: 0;
  content: '';
  pointer-events: none;
  display: block;
  height: 75px;
  width: 300px;
  background-image: url(https://i.stack.imgur.com/JbkZl.png);
}

.pinEntry {
  position: relative;
  padding: 16px 29px;
  font-family: courier, monospaced;
  font-size: xx-large;
  border: none;
  outline: none;
  width: 302px;
  letter-spacing: 55px;
  background-color: transparent;
  overflow: hidden;
  text-align: left;
  direction: ltr;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.css"/>

<form role="form" method="POST" action="">
  <div class="row my-4">
    <div class="col-12 text-center">
      <div class="pinBox">
        <input class="pinEntry" name="token" type="text" maxlength="4" value="">
      </div>
    </div>
  </div>

  <div class="text-center">
    <button type="submit" class="btn btn-primary mt-2">submit</button>
  </div>
</form>

這是一個jsfidde 演示

uj5u.com熱心網友回復：

經過一番調查后，我意識到奇怪的是，通過分配overflow: hidden;給父元素，一旦插入第 4 個值，就會導致輸入跳躍/移動背景關系 X 位置。

解決方案：

• 在元素上使用CSS ！clip<input>
• 將方形網格指定background-image為父元素的 （無需使用::before偽元素！）

.pinBox {
  --width: 296px;
  --height: 74px;
  --spacing: 47px;
  
  display: inline-block;
  position: relative;
  width: var(--width);
  height: var(--height);
  background-image: url(https://i.stack.imgur.com/JbkZl.png); 
}

.pinEntry {
  position: absolute;
  padding-left: 21px;
  font-family: courier, monospaced;
  font-size: var(--spacing);
  height: var(--height);
  letter-spacing: var(--spacing);
  background-color: transparent;
  border: 0;
  outline: none;
  clip: rect(0px, calc(var(--width) - 21px), var(--height), 0px);
}

<div class="pinBox">
  <input class="pinEntry" name="token" type=text maxlength=4 autocomplete=off >
</div>

上面的一個缺點是：一旦輸入了所有四個值，并且如果用戶在第四個值之后單擊- 插入符號將不可見，因為它被剪裁（第 5 個位置內的字母間距）。你可以忍受它 - 很好，但在我看來這是一個糟糕的 UX/UI。

Perhaps you can add to the above some really small JS that does:

• IF the input has 4 values length - select all the text-value using myInput.select()

Example:

const ELS_pinEntry = document.querySelectorAll(".pinEntry");
const selectAllIfFull = (evt) => {
  const EL_input = evt.currentTarget;
  if (EL_input.value.length >= 4) EL_input.select();
};
ELS_pinEntry.forEach(el => {
  el.addEventListener("focusin", selectAllIfFull);
});

.pinBox {
  --width: 296px;
  --height: 74px;
  --spacing: 47px;
  
  display: inline-block;
  position: relative;
  width: var(--width);
  height: var(--height);
  background-image: url(https://i.stack.imgur.com/JbkZl.png); 
}

.pinEntry {
  position: absolute;
  padding-left: 21px;
  font-family: courier, monospaced;
  font-size: var(--spacing);
  height: var(--height);
  letter-spacing: var(--spacing);
  background-color: transparent;
  border: 0;
  outline: none;
  clip: rect(0px, calc(var(--width) - 21px), var(--height), 0px);
}

<div class="pinBox">
  <input class="pinEntry" name="token" type=text maxlength=4 autocomplete=off >
</div>

Another cons I would improve by using the above (and the original) idea is: A11Y (Accessibility).
The many users with bad or challenged sight should be able to see an input outline while they tab trough a website. For design reasons the above had to remove the CSS outline on the INPUT element. Which is a no-no.

Currently I have no other better/simpler idea but to use 4 different inputs and join their values into a single hidden one that will ultimately be submitted with the FORM.

標籤：javascript html css 推特引导 引导程序 5

上一篇：Bootstrapv5.1.3：將$colors與$theme-colors地圖合并

下一篇：引導導航專案和彈性專案居中