Reading Time: 3 minutes

1,702 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.

Online Web Tutor invites you to try Skillshike! Learn CakePHP, Laravel, CodeIgniter, Node Js, MySQL, Authentication, RESTful Web Services, etc into a depth level. Master the Coding Skills to Become an Expert in PHP Web Development. So, Search your favourite course and enroll now.

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.