-6

I would like to create a hightlight html inputs when they get focused using css and javascript, and jump through inputs highlighting the corners.

What I mean, is, when a text input get focused a quarter frame (L) locate in each corner, and when another input get focused those (L)s moves through the form to locate in the new focused control

I wanted to publish an image but I haven´t enough reputation points

Could anyone lead me how to do it?

Thanks

4

2 回答 2

1

我不知道您是否出于某种原因必须使用 javascript，但您可以使用纯 CSS 处理焦点突出显示。

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

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

简单，干净

编辑：

在此处输入图像描述

我想这是可以做到的，但它超出了我的 CSS 技能范围。

我唯一的 CSS 想法是某种渐变，但我认为您不能渐变轮廓，只能渐变边框。而且您不会拥有完整的浏览器覆盖范围。

您可以通过左右放置图像来使用:before 和 :after做一些事情。

Javascript 明智的有一个Malsup 插件，您可以查看，但没有与该图像完全匹配的内容。

于 2013-07-06T18:56:30.817 回答
0

我可以自己做！！！

首先，您必须在 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');
    });
}

效果超级棒！！！试试看 ：）

于 2013-07-07T04:00:29.540 回答