CODEWITHSUNDEEP
javascriptjquery
Xander
Xander

Reputation: 397

Prevent clicking an anchor link while an input is focused?

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...

Upvotes: 1

Views: 921

Answers (2)

Floremin
Floremin

Reputation: 4089

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>

Upvotes: 2

Xander
Xander

Reputation: 397

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.

Upvotes: 0

Related Questions