真实项目开发的input标签焦点事件运用

真实项目开发中input标签焦点事件的运用

开发工具与关键技术：VisualStudio C#
作者：落白
撰写时间：2019/6/15

在开发项目时有时候会需要这么一个功能效果，比如有六个input标签，当点击其中任何一个标签时会再点击的input标签附近出现一个选项卡之类的卡片，再点击其他的input标签时之前的卡片会消失然后出现在新点击的input标签附近。

这个功能我们可以用input的焦点事件实现。

使用焦点事件的好处是可以准确地获取到当前的焦点位置，这就相当于给卡片该出现的位置提供了坐标。首先卡片是隐藏的。所以在获取到input当前的焦点位置后我们让卡片在相应的位置显示出来。

var elfocus;//记录焦点元素
var isMouseOver = false;//记录状态决定是否关闭选项卡
    //城市输入框聚焦事件
    $("#FromVoyage").on("focus", 'input', function (e) {// FromVoyage是form表单的ID
        var theTab = $("#theTab");//城市选项卡的HTML
        $(this).parent().parent().append(theTab);//找到当前焦点位置的父级并将选项卡移动
        theTab.css("display", "");
        elfocus = this;
        isMouseOver = false;
});

既然有显示，那必然也有隐藏。当我们不想让卡片显示出来时可以使用焦点事件的相反事件，失去焦点事件。也就是当input失去焦点的时候让卡片隐藏起来。这样失去焦点时点击除了input标签外的任何一个位置，卡片都会关闭。

//城市输入框失去焦点事件
    $("#FromVoyage").on("focusout",  'input', function () {
        var theTab = $("#theTab");
        theTab.css("display", "none");
    });

因为在上面的例子中用的是一个选项卡，而我们又让它失去焦点时卡片直接关闭，这样选项卡就失去了点击切换内容的功能。所以使用的是选项卡时我们还需要补充一些代码。我们可以var isMouseOver = false；用这个变量来决定选项卡是否关闭。当鼠标指针移入选项卡时让它为true，鼠标离开是为false。当isMouseOver = true时选项卡显示，当isMouseOver = false;时选项卡关闭

//鼠标进入事件
    $("#theTab").mouseenter(function () {
        isMouseOver = true;
    });
    //鼠标离开事件
    $("#theTab").mouseleave(function () {
        isMouseOver = false;
    });

再之前的失去焦点里判断isMouseOver是true还是false，选项卡的切换功能就被保留了。

//城市输入框失去焦点事件
    $("#FromVoyage").on("focusout", '.theFocus', function () {
        var theTab = $("#theTab");
        if (!isMouseOver) {
            theTab.css("display", "none");
        }
    });