Javascript 在输入焦点上移动/设置占位符动画

我正在寻找帮助与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{
位置：相对位置；
宽度：100%；
}
.formRow--项目{
显示：块；
宽度：100%；
}
.输入文本{
位置：相对位置；
填充：15px 20px 11px；
宽度：100%；
大纲：无；
边框：实心1pxRGB（149152154）；
边界半径：4px；
颜色：rgb（44,50,53）；
字母间距：.2px；
字体大小：400；
字体大小：16px；
调整大小：无；
过渡：所有。2轻松；
} 
.屏幕阅读器文本{
位置：相对位置；
显示：块；
宽度：100%；
}
.screen-reader-text.active{
.占位符{
顶部：-5px；
背景色：#ffffff；
颜色：#fd999a；
文本转换：大写；
字母间距：.8px；
字体大小：11px；
线高：14px；
变换：translateY（0）；
}           
}
.屏幕阅读器文本：非（：焦点）：非（：悬停）{
&~.占位符{
颜色：#fec8c9；
}
}
.输入文本{
&：焦点，
&：悬停{
边框颜色：红色；
}
}
.占位符{
位置：绝对位置；
最高：50%；
左：10px；
显示：块；
填充：0 10px；
颜色：rgb（149152154）；
空白：nowrap；
字母间距：.2px；
字体大小：正常；
字体大小：16px；
过渡：全部为.2s；
转化：translateY（-50%）；
指针事件：无；
用户选择：无；
}

我没有浪费时间修复您的不良缩进做法，但这里有一个快速而肮脏的解决方案：

$（函数（）{//load
常量inputText=$（'.inputText'）；
inputText.focus（函数（）{
常数t=$（此值）；
如果（t.val（）==''）{
t、 addClass（“淡入淡出白色”）；
设置超时（（）=>{
t、 attr（'placeholder'，''）；t.removeClass（'fade_-white'）；
}, 270);
}
否则{
t、 属性（'占位符'，''）；
}
});
inputText.blur（函数（）{
$（this.attr（'placeholder'，'First name'）；
});
});// 端部载荷

.formRow{
位置：相对位置；
宽度：100%；
}
.formRow--项目{
显示：块；
宽度：100%；
}
.输入文本{
位置：相对位置；
填充：15px 20px 11px；
宽度：100%；
大纲：无；
边框：实心1pxRGB（149152154）；
边界半径：4px；
颜色：rgb（44,50,53）；
字母间距：.2px；
字体大小：400；
字体大小：16px；
调整大小：无；
过渡：所有。2轻松；
} 
.屏幕阅读器文本{
位置：相对位置；
显示：块；
宽度：100%；
}
.screen-reader-text.active{
.占位符{
顶部：-5px；
背景色：#ffffff；
颜色：#fd999a；
文本转换：大写；
字母间距：.8px；
字体大小：11px；
线高：14px；
变换：translateY（0）；
}           
}
.屏幕阅读器文本：非（：焦点）：非（：悬停）{
&~.占位符{
颜色：#fec8c9；
}
}
.输入文本{
&：焦点，
&：悬停{
边框颜色：红色；
}
}
.占位符{
位置：绝对位置；
最高：50%；
左：10px；
显示：块；
填充：0 10px；
颜色：rgb（149152154）；
空白：nowrap；
字母间距：.2px；
字体大小：正常；
字体大小：16px；
过渡：全部为.2s；
转化：translateY（-50%）；
指针事件：无；
用户选择：无；
}
/*上面不是我的CSS-修复你的*/
.输入文本{
过渡：颜色0.25s缓进缓出；颜色：#000；
}
.input-text.fade_白色{
颜色：#fff；
}

是的，我一直在努力寻找答案。尝试去这里，我希望这能奏效。

：focus

伪类与

.focused

不同。