前端angular 实现验证码输入+展示(大框+加粗内容 )

news2025/6/7 12:36:49

参考用原生方在手机上此效果如何实现一个4位验证码输入框效果

输入使用的任旧是html的input元素，只是让它看不到了
只是把输入到input元素里的内容取到的内容放在改过样式的div里
不需要dom操作，直接用双向绑定就拿到数据；使用动态样式设置了激活的样式

input输入框
1. html

    <input
      class="code-input"
      type="text"//文本输入框
      autoComplete="one-time-code"//验证码
      maxLength="6"//限制输入6位
      inputMode="numeric"//唤起手机上的数字输入键盘
      pattern="[0-9]*"
      [(ngModel)]="code"//angular的数据双向绑定
      (focus)="onInputFocus()"//聚焦事件
      (blur)="onInputBlur()"//失焦事件
    />

2.css

.code-input{
  opacity: 0;//隐藏输入框
  position: absolute;//确保可以被点到
  width: 100%;
  height: 100%;
}

2.展示的验证码

1.单个div的html

 <!-- 在 TypeScript 或 JavaScript 中，可以使用方括号 [] 访问字符串索引例如，要获取字符串 code 的第一位 code[0]即可-->
    <div
      class="code-item"
      [ngClass]="{ active: code.length === 0 && isInputFocused }"
    >
      {{ code[0] }}
    </div>

完整的html

<div class="code-box">
    <!-- 在 TypeScript 或 JavaScript 中，可以使用方括号 [] 访问字符串索引例如，要获取字符串 code 的第一位 code[0]即可-->
    <div
      class="code-item"
      [ngClass]="{ active: code.length === 0 && isInputFocused }"
    >
      {{ code[0] }}
    </div>
    <div
      class="code-item"
      [ngClass]="{ active: code.length === 1 && isInputFocused }"
    >
      {{ code[1] }}
    </div>
    <div
      class="code-item"
      [ngClass]="{ active: code.length === 2 && isInputFocused }"
    >
      {{ code[2] }}
    </div>
    <div class="divider"></div>
    <div
      class="code-item"
      [ngClass]="{ active: code.length === 3 && isInputFocused }"
    >
      {{ code[3] }}
    </div>
    <div
      class="code-item"
      [ngClass]="{ active: code.length === 4 && isInputFocused }"
    >
      {{ code[4] }}
    </div>
    <div
      class="code-item"
      [ngClass]="{ active: code.length === 5 && isInputFocused }"
    >
      {{ code[5] }}
    </div>

2.css

.code-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
// 分割线
.divider {
  border-top: 1px solid black;
  width: 1rem;
}
.code-item {
  width: 3rem;
  height: 3rem;
  border: 1px solid #e5e6eb;
  border-radius: 5px;

  text-align: center;
  line-height: 2.8rem;
  font-size: 1.5rem;
  color: #000;
  font-weight: bold;
  transition: border 0.3s;
  box-sizing: border-box;
}
.active {
  border: 3px solid #1e68fc !important;
}

3.ts