Disable (Prevent) mouse Right Click on when TextBox is disabled in jQuery and JavaScript

madhusud...

SOLVED CLOSED ACTIVE ANSWERED
User: madhusudhan.ur
Posted: on May 30, 2020 06:53 AM
Forum: JavaScript
Answer: 1
Views: 9344

Hi Team,

I have added the below script to disable the right click, it’s working in all browsers except Mozilla Firefox,

In Mozilla Firefox when you right click on the textbox field that is disabled, the right click menu is still appearing in Firefox, when the textbox field is disabled.

Can you please let me know the solution how to disable right click option in Firefox particularly for input text fields when it’s disabled?

<%-- below scripts are for disabling rigth click and  --%>
<script type="text/javascript">
    if (document.layers) {
        //Capture the MouseDown event.
        document.captureEvents(Event.MOUSEDOWN);
 
        //Disable the OnMouseDown event handler.
        document.onmousedown = function () {
            return false;
        };
    }
    else {
        //Disable the OnMouseUp event handler.
        document.onmouseup = function (e) {
            if (e != null && e.type == "mouseup") {
                //Check the Mouse Button which is clicked.
                if (e.which == 2 || e.which == 3) {
                    //If the Button is middle or right then disable.
                    return false;
                }
            }
        };
    }
 
    //Disable the Context Menu event.
    document.oncontextmenu = function () {
        return false;
    }
</script>

dharmend...

0 3

Reply
ANSWER
User: dharmendr
Replied: on May 30, 2020 08:22 AM
Modified: on Jun 18, 2020 02:31 AM
Report

Hi madhusudhan.u...,

contextmenu event won't work for disabled elements in firefox, it's a firefox behaviour.

So you could place an element in front of the disabled input and catch the click event on that element.

HTML

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
    <script type="text/javascript">
        if (document.layers) {
            //Capture the MouseDown event.
            document.captureEvents(Event.MOUSEDOWN);

            //Disable the OnMouseDown event handler.
            document.onmousedown = function () {
                return false;
            };
        }
        else {
            //Disable the OnMouseUp event handler.
            document.onmouseup = function (e) {
                if (e != null && e.type == "mouseup") {
                    //Check the Mouse Button which is clicked.
                    if (e.which == 2 || e.which == 3) {
                        //If the Button is middle or right then disable.
                        return false;
                    }
                }
            };
        }

        //Disable the Context Menu event.
        document.oncontextmenu = function (event) {
            return false;
        }
    </script>
    <script type="text/javascript">
        $(function () {
            $("#dvDisabledTextBox").on('click', function () {
                $(this).hide().prev("input[disabled]").prop("disabled", false).focus();
            });
        });
    </script>    
</head>
<body>
    <div>
        <input type="text" readonly="readonly" disabled="disabled" />
        <div id="dvDisabledTextBox" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0;"></div>
    </div>
</body>
</html>

Demo

Or you could use the css to disable right click on disabled textbox.

<style>
    input.disabled {
        user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
        color: gray;
        cursor: pointer;
    }
</style>

Disable (Prevent) mouse Right Click on when TextBox is disabled in jQuery and JavaScript

Company

Explore

Follow us

Contact Us