How To Disable f5 Refresh Button Using jQuery Tutorial

Table of Contents

Share this Article
Reading Time: 3 minutes
370 Views

Inside this article we will see the concept i.e How To Disable f5 refresh button using jQuery. The F5 key is a function key found at the top of almost all computer keyboards. The key is most often used to refresh a web page in an Internet browser.

Users generally use this f5 button to reload their web pages, for page refresh or sometimes for hard reload. Reload a webpage using f5 keyboard button is not only a single option also we have multiple options to do this.

In some cases we don’t need to give users to reload their web pages via f5 keyboard button. So in this tutorial we will see the concept to disable the function of f5 for page reload. We will implement using jquery or javascript code.

Learn More –

Let’s get started.

Application Programming

Create a file index.html inside your project folder. Open index.html and write this following code into it.

<!DOCTYPE html>
<html>
<head>
    <title>How To Disable f5 Refresh Button Using jQuery Tutorial</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <h2>How To Disable f5 Refresh Button Using jQuery Tutorial</h2>
    </div>
    <script type="text/javascript">
        $(document).ready(function() {
            $(window).keydown(function(event){
                if(event.keyCode == 116) {
                    event.preventDefault();
                    return false;
                }
            });
        });
    </script>
</body>
</html>

Concept

Here, we have used the core concept of jquery and javascript. Concept of keydown event and keycode logic. Button f5 has the keycode 116.

$(document).ready(function() {
    $(window).keydown(function(event){
        if(event.keyCode == 116) {
            event.preventDefault();
            return false;
        }
    });
});

Simply use this code and restrict the page load using f5.

We hope this article helped you to learn How To Disable Browser Back Button Using jQuery Tutorial in a very detailed way.

Buy Me a Coffee

Online Web Tutor invites you to try Skillshare free for 1 month! Learn CakePHP 4, Laravel APIs Development, CodeIgniter 4, Node Js, etc into a depth level. Master the Coding Skills to Become an Expert in Web Development. So, Search your favourite course and enroll now. Click here to join.

If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.

Was this post helpful?

Learn Web Development Courses Risk Free @ $5 only.
Web Development Courses @ $5