真实项目开发中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");
}
});