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

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

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

1. input输入框
   1. html 

                2.css

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

2.展示的验证码

        1.单个div的html 

 
    

      {{ code[0] }}
    

 完整的html 

    
    

      {{ code[0] }}
    
    

      {{ code[1] }}
    
    

      {{ code[2] }}
    
    

    

      {{ code[3] }}
    
    

      {{ code[4] }}
    
    

      {{ code[5] }}
    

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 = "";

这样就完成了一个验证码 输入+展示(大框+加粗内容 )的效果