我正在寻求有关 JS 的帮助，以便为占位符设置动画以在选择时移动到输入框上方。我已经尝试了各种编码，这似乎是最接近实现结果的。
我尝试应用以下 JS 脚本，但它似乎会引发错误。这可能是 jquery 的错误。
如果您能提供任何帮助，我们将不胜感激。
$('input').focus(function(){
$(this).parents('.billing_first_name_field').addClass('focused');
});
$('input').blur(function(){
var inputValue = $(this).val();
if ( inputValue == "" ) {
$(this).parents('.billing_first_name_field').removeClass('focused');
} else {
$(this).addClass('filled');
}
})
这是我应用的 HTML 和 CSS。
.formRow {
position: relative;
width: 100%;
}
.formRow--item {
display: block;
width: 100%;
}
.input-text {
position: relative;
padding: 15px 20px 11px;
width: 100%;
outline: none;
border: solid 1px rgb(149, 152, 154);
border-radius: 4px;
color: rgb(44, 50, 53);
letter-spacing: .2px;
font-weight: 400;
font-size: 16px;
resize: none;
transition: all .2s ease;
}
.screen-reader-text {
position: relative;
display: block;
width: 100%;
}
.screen-reader-text.active {
.placeholder {
top: -5px;
background-color: #ffffff;
color: #fd999a;
text-transform: uppercase;
letter-spacing: .8px;
font-size: 11px;
line-height: 14px;
transform: translateY(0);
}
}
.screen-reader-text:not(:focus):not(:hover) {
& ~ .placeholder {
color: #fec8c9;
}
}
.input-text {
&:focus,
&:hover {
border-color: red;
}
}
.placeholder {
position: absolute;
top: 50%;
left: 10px;
display: block;
padding: 0 10px;
color: rgb(149, 152, 154);
white-space: nowrap;
letter-spacing: .2px;
font-weight: normal;
font-size: 16px;
transition: all, .2s;
transform: translateY(-50%);
pointer-events: none;
user-select: none;
}<div class="woocommerce-billing-fields__field-wrapper">
<p class="form-row form-row-first validate-required validate-required" id="billing_first_name_field" data-priority="">
<label for="billing_first_name" class="screen-reader-text"><abbr class="required" title="required">
</label>
<span class="woocommerce-input-wrapper">
<input type="text" class="input-text" name="billing_first_name" id="billing_first_name" placeholder="First name" value="" autocomplete="given-name">
</span>
</p>
非常感谢!
最佳答案
我没有浪费我的时间来修复你的不良缩进做法，但这里有一个快速而肮脏的解决方案:
$(function(){ // load
const inputText = $('.input-text');
inputText.focus(function(){
const t = $(this);
if(t.val() === ''){
t.addClass('fade_white');
setTimeout(()=>{
t.attr('placeholder', ''); t.removeClass('fade_white');
}, 270);
}
else{
t.attr('placeholder', '');
}
});
inputText.blur(function(){
$(this).attr('placeholder', 'First name');
});
});// end load.formRow {
position: relative;
width: 100%;
}
.formRow--item {
display: block;
width: 100%;
}
.input-text {
position: relative;
padding: 15px 20px 11px;
width: 100%;
outline: none;
border: solid 1px rgb(149, 152, 154);
border-radius: 4px;
color: rgb(44, 50, 53);
letter-spacing: .2px;
font-weight: 400;
font-size: 16px;
resize: none;
transition: all .2s ease;
}
.screen-reader-text {
position: relative;
display: block;
width: 100%;
}
.screen-reader-text.active {
.placeholder {
top: -5px;
background-color: #ffffff;
color: #fd999a;
text-transform: uppercase;
letter-spacing: .8px;
font-size: 11px;
line-height: 14px;
transform: translateY(0);
}
}
.screen-reader-text:not(:focus):not(:hover) {
& ~ .placeholder {
color: #fec8c9;
}
}
.input-text {
&:focus,
&:hover {
border-color: red;
}
}
.placeholder {
position: absolute;
top: 50%;
left: 10px;
display: block;
padding: 0 10px;
color: rgb(149, 152, 154);
white-space: nowrap;
letter-spacing: .2px;
font-weight: normal;
font-size: 16px;
transition: all, .2s;
transform: translateY(-50%);
pointer-events: none;
user-select: none;
}
/* not my CSS above here - fix yours */
.input-text{
transition:color 0.25s ease-in-out; color:#000;
}
.input-text.fade_white{
color:#fff;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="woocommerce-billing-fields__field-wrapper">
<p class="form-row form-row-first validate-required validate-required" id="billing_first_name_field" data-priority="">
<label for="billing_first_name" class="screen-reader-text"><abbr class="required" title="required">
</label>
<span class="woocommerce-input-wrapper">
<input type="text" class="input-text" name="billing_first_name" id="billing_first_name" placeholder="First name" value="" autocomplete="given-name">
</span>
</p>
<!-- not my HTML - fix yours --->https://stackoverflow.com/questions/64654903/
相关文章：
node.js - Kubernetes Crashloopbackoff 与 Minikube
android - 在 Dart 上将相机从一个屏幕传递到另一个屏幕
python - 在 matplotlib 中分段更改 x 轴刻度
android - x + 宽度必须 <= bitmap.width()
css - 使用 Inset 的 React Native Complex Shadow
vue.js - 使用 vue 的故事书 - SassError : Undefined varia
python - 'google-api-python-client' distribution 在
elasticsearch - FluentBit 和 ES 的重复和缺失日志条目