Javascript 如何根据焦点切换输入类？

我有一个非常基本的联系方式，它有3个输入，我需要根据它们是否有焦点来调整样式

使用我目前拥有的JavaScript，我仅在单击事件时获得所需的结果，而不是在输入具有焦点时。例如，我想切换指定的“scale”类，如果它们也要通过输入进行制表，而不是仅仅点击或单击它们的内部或外部。因此，我认为基于焦点切换类会是一个更好的解决方案，但使用.focus（）或.is（“：focus”）时运气不佳

此外，在手机上点击表单输入的外部不会像在桌面浏览器上单击那样删除“缩放”类。我不知道该怎么处理

任何帮助都将不胜感激

var$input=$（'input，textarea'）；
//如果用户在焦点类之外单击，则删除该焦点类
$（窗口）。在（'单击触摸'，函数（）上）{
if（$input.parent（）.hasClass（'scale'））{
$input.parent（）.removeClass（'scale'）；
}
});
//单击缩放表单容器
$input.on（'点击触摸'）功能（事件）{
event.stopPropagation（）；
$（this.parent（）.addClass（'scale'）；
$input.not（$（this））.parent（）.removeClass（'scale'）；
});
*{
字体系列：蒙特塞拉特；
}
投入：聚焦，
选择：焦点，
文本区域：焦点，
按钮：焦点{
大纲：无；
}
身体{
背景色：rgba（230232235,1）；
}
/*节容器*/
#表格部分{
填充：5%；
}
/*形式*/
形式{
保证金：0自动；
宽度：400px；
}
/*形态悬停*/
表单>div：悬停>div{
不透明度：0.65；
过渡：0.3s；
}
/*表单字段容器*/
表格>分区>分区{
背景色：白色；
边界半径：4px；
盒影：0 1px4pxRGBA（0,10,20,0.10），0 6px10pxRGBA（0,10,20,0.06）；
保证金：0自动30px自动；
位置：相对位置；
过渡：0.3s；
宽度：85%；
}
/*表单字段容器-悬停*/
窗体>分区>分区：悬停{
不透明度：1；
过渡：0.3s；
}
/*表单字段比例类*/
表格>分区>分区比例{
盒影：0 3px 8px rgba（0,10,20,0.12），0 10px 20px rgba（0,10,20,0.1）；
不透明度：1；
转换：scale3d（1.05,1.05,1）；
过渡：0.3s；
}
/*表格标签*/
标签{
背景色：rgba（242245248,1）；
边框左上半径：4px；
边框右上角半径：4px；
颜色：rgba（165175185,1）；
显示：块；
字体大小：12px；
字号：500；
高度：30px；
字母间距：0.1米；
线高：30px；
宽度：100%；
}
/*投入*/
输入，
文本区{
边界：无；
边框左下半径：4px；
边框右下半径：4px；
颜色：rgba（115125135,1）；
字体大小：16px；
线高：1.6em；
宽度：100%；
}
/*消息输入*/
文本区{
最小高度：100px；
调整大小：垂直；
}
/*提交按钮*/
输入[type=“submit”]{
背景色：混合色（白色，rgba（87,37,18,1），20%）；
边界半径：4px；
颜色：白色；
显示：块；
字体大小：14px；
字号：700；
字母间距：0.1米；
保证金：0自动；
文本转换：大写；
过渡：0.3s；
-webkit外观：无；
宽度：120px；
}
/*提交按钮-悬停*/
输入[type=“submit”]：悬停{
背景色：rgba（87,37,18,1）；
盒影：0.2px 8px rgba（0,10,20,0.25），0.8px 12px rgba（0,10,20,0.12）；
光标：指针；
变换：translate3d（0，-2px，0）；
过渡：0.3s；
}

名称
电子邮件
消息
在您的第一个功能中使用
模糊

当元素失去焦点时触发事件

在第二种情况下，使用
focus

当元素接收到焦点时触发事件

不要使用
点击触摸
，而是在第一个功能中使用
模糊

当元素失去焦点时触发事件

在第二种情况下，使用
focus

当元素接收到焦点时触发事件

您可以使用jquery.focus（）事件。试试这个：

 $input.focus(function() {
    $(this).parent().addClass('scale');
    $input.not($(this)).parent().removeClass('scale');
 });

您可以使用jquery.focus（）事件。试试这个：

 $input.focus(function() {
    $(this).parent().addClass('scale');
    $input.not($(this)).parent().removeClass('scale');
 });

这个怎么样？这个怎么样？
 $input.focus(function() {
    $(this).parent().addClass('scale');
    $input.not($(this)).parent().removeClass('scale');
 });

var $input = $('input, textarea');

// Remove focus class if user clicks outside it
    $(window).on('focusout', function() {
        if ( $input.parent().hasClass('scale') ) {
            $input.parent().removeClass('scale');
        }
    });

    // Scale form container on click
    $input.on('focus', function(event) {
        event.stopPropagation();
        $(this).parent().addClass('scale');
        $input.not($(this)).parent().removeClass('scale');
    });