防止在输入焦点时单击锚点链接？

我试图阻止用户点击一个链接，并在任何输入焦点时转到另一个页面。有时输入和键盘周围唯一可用的空间是链接，并且一些用户偶然点击链接。我试图做到这一点，当他们点击链接时会模糊输入（关闭键盘）并阻止页面跟随链接。然后让他们再次单击该链接，如果他们想在输入不再焦点后转到另一个页面。防止在输入焦点时单击锚点链接？

HTML

<input type="text"> 
<a href="example.com">Example</a>

我试过下面...

jQuery的

$('a').on('click', function (event) { 
    if ($('input').is(":focus")) { 
     console.log('focused'); 
     event.preventDefault(); 
    } 
});

（没有得到记录）

也试过这样。 ..

if ($('input').is(":focus")) { 
    $('a').on('click', function (event) { 
     event.preventDefault(); 
     $('input').each(function(){ 
     $(this).trigger('blur'); 
     }); 
    }); 
    }

两者都不阻止该网页将被点击任何链接...

来源

2016-03-15 Xander

'点击开始注册 – charlietfl

之前“有时候周围的输入唯一的可用空间和键盘的链接和一些用户点击链接意外” blur'会做好像你正在试图解决设计问题与代码。考虑改变设计。 – zzzzBov

在这种情况下不可能重新设计。这是一个真正的小屏幕上的问题，因为键盘占用了太多的空间，输入固定在顶部，必须是。寻找一个实际的解决方案。 – Xander

我不认为你可以做到这一点。您可以禁用链接上的click事件，同时关注input，并在input元素上发生blur时再次启用它。然而，虽然如果用户点击链接，同时关注input元素blur事件将首先发生（这将启用点击），然后click甚至发生并且链接正常工作。

你可以尝试禁用链接，同时input元素具有焦点，那么你就可以在第一次点击，使他们恢复正常的运作。

$("input").on("focus", function() { 
 
    $("a").on("click", function (event) { 
 
     event.preventDefault(); 
 
     $("a").off(); 
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" /> 
 
<a href="http://example.com/">example</a>

来源

2016-03-15 18:41:55 Floremin

哦，这个工程呢！这正是我所期待的。 – Xander

我想我找到了解决办法。

HTML

Example.com

jQuery的

$('input').on('focus', function() { 
     $('a').each(function(){ 
     $(this).addClass('cant-click'); 
     }); 
}); 

$(document).on('touchend', function (e) { 
    if (!$(e.target).closest('input').length) { 
     $('a').each(function(){ 
     $(this).removeClass('cant-click'); 
     }); 
    } 
});

CSS

a.cant-click { pointer-events: none; }

当输入焦点时，每个链接都会获得这个类。当页面上的任何内容被点击而不是输入时，它会从每个链接中删除这个类。

来源

2016-03-15 18:53:11 Xander

防止在输入焦点时单击锚点链接？

回答

相关问题