防止在输入集中时单击锚链接？

Question

I'm attempting to prevent a user from clicking a link and it going to another page while any input is focused. Sometimes the only available space around the input and the keyboard is a link and some users click the link accidentally. I'm trying to make it so when they click the link it blurs the input (closes the keyboard) and prevents the page from following the link. Then let them click the link again if they want to go to another page after the input is no longer in focus.

html

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

I've tried the following...

jQuery

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

(nothing gets logged)

Also tried this...

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

Neither one prevent the page from going to whatever link was clicked...

Answer 1

I don't think you can do this. You can disable the click event on the links while input is focused, and enable it back again when blur occurs on the input elements. However, while if user clicks on a link while focused on the input element blur event will occur first (which would enable clicking) then click even occurs and links acts as normal.

You could try disabling the links while input elements have focus, then you can enable them on the first click and restore normal operation.

 $("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> 

Answer 2

I think I found a solution.

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; }

When the input takes focus, every link gets this class. When anything on the page is clicked that is not an input, it removes this class from every link.