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

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

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

input输入框
1. html

    <inputclass="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]即可--><divclass="code-item"[ngClass]="{ active: code.length === 0 && isInputFocused }">{{ code[0] }}</div>

完整的html

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