问题描述
我是 React.js 的新手,我正在我的 React 项目中复制这个模板:https://codepen.io/shadeed/pen/ojOzEG
基本上我有一个电子邮件地址输入框。当点击输入框时,它是焦点。当点击离开时,它的焦点会丢失。但是,如果用户输入了某些内容并单击了它,我希望它保持专注。我该怎么做?
以下是我目前拥有的代码:
<div className="form-item">
<input type="email" id="email"/>
<label for="email">email address</label>
</div>
input {
@include placeholder {
color: #fff;
text-transform: capitalize;
}
position: relative;
width: 100%;
height: 100%;
left: 0;
border: 0;
border-radius: 4px;
background: rgb(55,129,207);
outline: 0;
padding: 2em 1em 1em 1em;
color: #fff;
font-size: 1em;
transition: background 0.35s ease-out;
&:focus {
background: #2862a0;
}
&:focus + label {
transform: translateY(-10px) scale(0.75);
color: #7bacdd;
+ button {
opacity: 1;
}
}
}
label {
position: absolute;
left: 1em;
top: 50%;
margin-top: -8px;
color: #fff;
text-transform: capitalize;
transform-origin: left center;
transition: transform 0.25s ease-out,color 0.25s ease-out;
}
以下是演示:
when clicked away(标签和用户输入相互叠加,这就是为什么如果输入框不为空,我希望焦点保持不变)
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)