CODEWITHSUNDEEP
javascriptjqueryhtml
Juicy
Juicy

Reputation: 12510

Prevent loss of focus unless hovering over a certain element

I have a page with a textarea #content and an input textbox #name. Once the user has clicked on #content, I want to prevent him from loosing focus of that textarea, unless he is clicking on #name.

I've tried the following:

// Prevent loss of focus for textarea
$("#content").on("blur", function(event) {
    $('#name').mouseover(function() {
       return true;
    });
    event.preventDefault();
    this.focus();
    return false;
});

It works just fine to prevent loss of focus of an element. But my idea of checking if he's hovering #name and returning just doesn't work.

Upvotes: 0

Views: 236

Answers (2)

faerin
faerin

Reputation: 1925

Something like this, maybe?

$(document).ready(function(){
   var id;
   $('#content').on('blur',function(){
       $(":input").focus(function(){
          id = this.id;
          if(id != 'username' && id != 'content'){ // sorry, changed your id from name to username. 
              $('#content').focus();   
              }
           });       
      });
  });

Working fiddle: http://jsfiddle.net/ugx3S/

Upvotes: 1

Fabricator
Fabricator

Reputation: 12772

Stole the code from here to get the element that triggered the blur.

var clicky;

$(document).mousedown(function(e) {
    // The latest element clicked
    clicky = $(e.target);
});

$("#content").on("blur", function(event) {
    if (clicky.attr('id') == 'name') {
        return true;
    }
    event.preventDefault();
    this.focus();
    return false;
});

fiddle

Upvotes: 2

Related Questions