How to disable this below context menu in jquery when text box is disabled

Question

How to disable this below context menu in jquery when text box is disabled. my right click disabled functionality working fine in all browsers except firefox.

Note: When text box is enabled the right click disabled functionality is working fine in all browsers.Please help here.

I tried the below code in my body tag. but it won't work in firefox

oncontextmenu="return false;"

enter image description here

Can you show us code ? , _how are you trying to dis-able it_ ? — Santhosh, Jan 23 '15 at 07:39
add that to the question or you are likely to get a number of downvotes for no code. Also suggest you provide a demo that replicates the problem — charlietfl, Jan 23 '15 at 07:42
@Sankar Update your question with your code , untill that it is not completely possible to help — Santhosh, Jan 23 '15 at 07:42
@sankar If you'll take a careful look at the context menu in the post, you can see, it's the common menu for the page, not the menu for inputs, which has functions like Copy and Paste. Why the common menu should be prevented? — Teemu, Feb 13 '15 at 13:50
What's the difference, it occurs anywhere else on the page! Just look at the image in your post, it's the _common contextmenu_. — Teemu, Feb 13 '15 at 14:04
Yes.i have this menu on all disabled buttons,drop down boxes,text boxes. — sankar, Feb 13 '15 at 14:05
You can get this __same menu__ by right-clicking anywhere on the page, not just on disabled textfields. — Teemu, Feb 13 '15 at 14:06
Please clean your glasses and look at the image you've posted, and re-read what I've written! That image is the only information _we_ have, since you haven't posted a _reproduceable example_, which has been required four times in the comments . Post that example, then we could possibly argue about this! — Teemu, Feb 13 '15 at 14:08
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/70854/discussion-between-sankar-and-teemu). — sankar, Feb 13 '15 at 14:21
That's still the same common context menu, except now you've Firebug installed : ( What is the problem, you can move your mouse by five pixels, and show this menu anyway. — Teemu, Feb 13 '15 at 14:22
@sankar it seems like `firefox` not firing events on disabled elements — Fares M., Feb 13 '15 at 14:58

score 6 · Answer 1 · edited May 23 '17 at 12:14

6

This code works in firefox:

document.oncontextmenu=disableclick;
function disableclick(event)
{
    event.preventDefault();
    alert("Context Menu Disabled");
    return false;    
}

http://jsfiddle.net/zumk5cta/1/

Update

contextmenu event won't work for disabled elements in firefox, it's a firefox behavior as explained well here

As a solution to your problem, I picked up the idea given by @Endy E in his response here:

html

<span class="inputWrapper">
    <input type="text" disabled />
    <div class="mouseEventTarget"></div>
</span>

css

.inputWrapper{
     position:relative;
}
.mouseEventTarget{
     position:absolute; 
     left:0; 
     right:0; 
     top:0; 
     bottom:0; 
     cursor: text
}

javascript

$(document).on('contextmenu', 'input:disabled + .mouseEventTarget',function(e){ 
    return false; 
});

fiddle

edited May 23 '17 at 12:14

Community

1
1

answered Feb 13 '15 at 14:14

Fares M.

1,538
1
17
18

The dup is a nice catch, and nailed also what I've been trying to explain to OP. – Teemu Feb 13 '15 at 15:02
@Teemu Yes, so you think that it should be marked as duplicate? – Fares M. Feb 13 '15 at 15:10
Actually I wouldn't. OP has something different, since the common menu pops up instead of the input menu. I'd wait until OP they post some code to work with (I hope they will), and if then it will appear, that there's just a wrong picture in the post, I'd vote for a dup. – Teemu Feb 13 '15 at 15:18
1

Yes, this question should be marked as a duplicate. Doesn't matter what kind of event is being captured if the answer is going to be the same: Firefox doesn't propagate events originating from a disabled form field of any kind. – cimmanon Feb 13 '15 at 17:21
what if the user textbox is in center with someother elements positioned before or after them – Nadeemmnn Mohd Feb 13 '15 at 20:44
@NadeemmnnMohd he have just to apply positioning style to the `.inputWrapper` class and not the `textbox` itself, but it's not the question here. – Fares M. Feb 14 '15 at 08:45

score 1 · Answer 2 · answered Feb 13 '15 at 22:40

HTML

<div>
In order to prevent default behavior of Firefox browser <br /> you need to go for a kind of hack/trick here is the trick take the 
    <div class="inputWrapper"> &nbsp;
  <input class="disabled" disabled   type="text"  />

</div>

</div>

CSS

.inputWrapper{display:inline-block;width:208px;z-index:9}
.disabled {
z-index: -1;
position: absolute;
width:200px
}

JQuery

$(document).on("contextmenu", ".inputWrapper", function(e){
   return false;
});

Demo JSFIDDLE

Explain

In order to prevent default behavior of Firefox browser you need to go for a kind of hack/trick here is the trick, bring the div above the input box using z-index and firing the event of parent div i.e inputWrapper

Note: z-index of parent div should always greater then the input element

score -1 · Answer 3 · answered Feb 13 '15 at 10:28

-1

You can do so with Javascript and/or an HTML attribute (which is really a Javascript event handler anyway) as described here:

Live Demo

<script language="javascript">
document.onmousedown=disableclick;
status="Right Click Disabled";
Function disableclick(event)
{
  if(event.button==2)
   {
     alert(status);
     return false;    
   }
}
</script>

and

<body oncontextmenu="return false">
...
</body>

answered Feb 13 '15 at 10:28

Mansukh Khandhar

2,542
1
19
29

This doesn't work when i right click on disabled button.This issue happens only in firefox. – sankar Feb 13 '15 at 12:22
Sorry i can't understand properly what is you required ... if you like this http://medialize.github.io/jQuery-contextMenu/demo/disabled-menu.html – Mansukh Khandhar Feb 13 '15 at 13:17

How to disable this below context menu in jquery when text box is disabled

3 Answers3