前端angular 实现验证码 输入+展示(大框+加粗内容 )
2024-01-07 21:10:01
参考用原生方在手机上此效果?如何实现一个4位验证码输入框效果
- 输入使用的任旧是html的input元素,只是让它看不到了
- 只是把输入到input元素里的内容取到的内容放在改过样式的div里
- 不需要dom操作,直接用双向绑定就拿到数据;使用动态样式 设置了激活的样式
- input输入框
- 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
code: string = "";
这样就完成了一个验证码 输入+展示(大框+加粗内容 )的效果
文章来源:https://blog.csdn.net/2301_78916954/article/details/135388786
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!