如何在控件聚焦时创建高亮动画

Question

我想在使用css和javascript进行聚焦时创建一个hightlight html输入，并跳过突出显示角落的输入。

我的意思是，当文本输入聚焦四分之一帧（L）位于每个角落时，当另一个输入聚焦时，那些（L）移动通过表格定位在新的聚焦控制中

我想发布图片，但我没有足够的声誉点

有人能引导我怎么做吗？

由于

Answer 1

我不知道你是否因为某种原因必须使用javascript，但你可以使用简单的CSS处理焦点突出显示。

input[type="text"]:focus, 
textarea:focus, 
select:focus
{
    border-color:#0cf;
    /* etc... */
} 

这将为输入的边框着色/突出显示

简单，干净

编辑：

我想它可以做到，但它不仅仅是我的CSS技能。

我唯一的CSS想法是某种Gradient，但我不认为你可以渐变一个轮廓，只是边界。而且你没有完整的浏览器覆盖率。

通过左右拖放图像，您可以对:before and :after执行某些操作。

Javascript智能有一个Malsup plugin可供您查看，但没有任何内容可以与该图像完全匹配。

Answer 2

我自己可以做到这一点!!!

首先，你必须在HTML上绘制四个角的亮点：

<img id="clt" src="img/clt.png" border="0" style="position:absolute;visibility:hidden"></span>
<img id="crt" src="img/crt.png" border="0" style="position:absolute;visibility:hidden"></span>
<img id="crb" src="img/crb.png" border="0" style="position:absolute;visibility:hidden"></span>
<img id="clb" src="img/clb.png" border="0" style="position:absolute;visibility:hidden"></span>

之后，创建一个JavaScript函数：

function getFocusFunct(){
    $("input[type=text], input[type=password], textarea").focus(function(){
        var ctl=$(this);
        var offset=ctl.offset();

        var clt=$("#clt");
        var crt=$("#crt");
        var crb=$("#crb");
        var clb=$("#clb");

        clt.css('visibility','visible');
        crt.css('visibility','visible');
        crb.css('visibility','visible');
        clb.css('visibility','visible');

        clt.animate({top:offset.top-3, left:offset.left-3}, 150);
        crt.animate({top:offset.top-3, left:offset.left+ctl.outerWidth()-4}, 150);
        crb.animate({top:offset.top+ctl.outerHeight()-4,left:offset.left+ctl.outerWidth()-4}, 150);
        clb.animate({top:offset.top+ctl.outerHeight()-4,left:offset.left-3}, 150);
    });
    $("input[type=text], input[type=password], textarea").blur(function(){
        clt.css('visibility','hidden');
        crt.css('visibility','hidden');
        crb.css('visibility','hidden');
        clb.css('visibility','hidden');
    });
}  

这超级棒效！试试吧:)）