问题描述
我正在尝试在 Ionic 中创建自定义 Float 标签,但是一旦输入它就可以了。不止一次当我们点击任何输入时,字段所有标签都是浮动的,请帮帮我
这是我的 HTML 代码:
Input.htmls
<div class="form-field">
<label [ngClass]="focused ? 'label-focused' : ''">Hellow</label>
<input type="text" (focus)="focused = true" (blur)="onBlur($event)" />
</div>
这是我的 SCSS 代码:
Input.scss
.form-field {
position: relative;
margin-bottom: 1rem;
height: 50px;
label {
position: absolute;
left: 1rem;
top: 1rem;
padding: 0 0.25rem;
color: #61686f;
font-size: 15px;
transition: 0.3s;
font-family: "Montserrat";
}
input {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
font-size: 15px;
border: 2px solid #e7ebee;
border-radius: 10px;
outline: none;
padding: 1rem;
background: none;
z-index: 1;
color: #171c25;
font-family: "Montserrat";
}
input:focus {
border-color: #fa578e;
}
.label-focused {
top: -0.4rem;
left: 0.8rem;
font-size: 14px;
font-weight: 600;
background-color: #fff;
z-index: 10;
}
}
这是我的组件打字稿代码: 输入.ts
onBlur(event: any) {
const value = event.target.value;
if (!value) {
this.focused = false;
} }
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)