safari exit full screen javascript

• Español – América Latina
• Português – Brasil
• Tiếng Việt

Making Fullscreen Experiences

We have the ability to easily make immersive fullscreen websites and applications, but like anything on the web there are a couple of ways to do it. This is especially important now that more browsers are supporting an "installed web app" experience which launch fullscreen.

Getting your app or site fullscreen

There are several ways that a user or developer can get a web app fullscreen.

• Request the browser go fullscreen in response to a user gesture.
• Install the app to the home screen.
• Fake it: auto-hide the address bar.

Request the browser go fullscreen in response to a user gesture

Not all platforms are equal . iOS Safari doesn't have a fullscreen API, but we do on Chrome on Android, Firefox, and IE 11+. Most applications you build will use a combination of the JS API and the CSS selectors provided by the fullscreen specification. The main JS API's that you need to care about when building a fullscreen experience are:

• element.requestFullscreen() (currently prefixed in Chrome, Firefox, and IE) displays the element in fullscreen mode.
• document.exitFullscreen() (currently prefixed in Chrome, Firefox and IE. Firefox uses cancelFullScreen() instead) cancels fullscreen mode.
• document.fullscreenElement (currently prefixed in Chrome, Firefox, and IE) returns true if any of the elements are in fullscreen mode.

When your app is fullscreen you no longer have the browser's UI controls available to you. This changes the way that users interact with your experience. They don't have the standard navigation controls such as Forwards and Backwards; they don't have their escape hatch that is the Refresh button. It's important to cater for this scenario. You can use some CSS selectors to help you change the style and presentation of your site when the browser enters fullscreen mode.

The above example is a little contrived; I've hidden all the complexity around the use of vendor prefixes.

The actual code is a lot more complex. Mozilla has created a very useful script that you can use to toggle fullscreen. As you can see, the vendor prefix situation it is complex and cumbersome compared to the specified API. Even with the slightly simplified code below, it is still complex.

We web developers hate complexity. A nice high-level abstract API you can use is Sindre Sorhus' Screenfull.js module which unifies the two slightly different JS API's and vendor prefixes into one consistent API.

Fullscreen API Tips

Making the document fullscreen.

It is natural to think that you take the body element fullscreen, but if you are on a WebKit or Blink based rendering engine you will see it has an odd effect of shrinking the body width to the smallest possible size that will contain all the content. (Mozilla Gecko is fine.)

To fix this, use the document element instead of the body element:

Making a video element fullscreen

To make a video element fullscreen is exactly the same as making any other element fullscreen. You call the requestFullscreen method on the video element.

If your <video> element doesn't have the controls attribute defined, there's no way for the user to control the video once they are fullscreen. The recommended way to do this is to have a basic container that wraps the video and the controls that you want the user to see.

This gives you a lot more flexibility because you can combine the container object with the CSS pseudo selector (for example to hide the "goFS" button.)

Using these patterns, you can detect when fullscreen is running and adapt your user interface appropriately, for example:

• By providing a link back to the start page
• By Providing a mechanism to close dialogs or travel backwards

Launching a page fullscreen from home screen

Launching a fullscreen web page when the user navigates to it is not possible. Browser vendors are very aware that a fullscreen experience on every page load is a huge annoyance, therefore a user gesture is required to enter fullscreen. Vendors do allow users to "install" apps though, and the act of installing is a signal to the operating system that the user wants to launch as an app on the platform.

Across the major mobile platforms it is pretty easy to implement using either meta tags, or manifest files as follows.

Since the launch of the iPhone, users have been able to install Web Apps to the home screen and have them launch as full-screen web apps.

If content is set to yes, the web application runs in full-screen mode; otherwise, it does not. The default behavior is to use Safari to display web content. You can determine whether a webpage is displayed in full-screen mode using the window.navigator.standalone read-only Boolean JavaScript property. Apple

Chrome for Android

The Chrome team has recently implemented a feature that tells the browser to launch the page fullscreen when the user has added it to the home screen. It is similar to the iOS Safari model.

You can set up your web app to have an application shortcut icon added to a device's home screen, and have the app launch in full-screen "app mode" using Chrome for Android's "Add to Home screen" menu item. Google Chrome

A better option is to use the Web App Manifest.

Web App Manifest (Chrome, Opera, Firefox, Samsung)

The Manifest for Web applications is a simple JSON file that gives you, the developer, the ability to control how your app appears to the user in the areas that they would expect to see apps (for example the mobile home screen), direct what the user can launch and, more importantly, how they can launch it. In the future the manifest will give you even more control over your app, but right now we are just focusing on how your app can be launched. Specifically:

• Telling the browser about your manifest
• Describing how to launch

Once you have the manifest created and it is hosted on your site, all you need to do is add a link tag from all your pages that encompass your app, as follows:

Chrome has supported Manifests since version 38 for Android (October 2014) and it gives you the control over how your web app appears when it is installed to the home screen (via the short_name , name and icons properties) and how it should be launched when the user clicks on the launch icon (via start_url , display and orientation ).

An example manifest is shown below. It doesn't show everything that can be in a manifest.

This feature is entirely progressive and allows you create better, more integrated experiences for users of a browser that supports the feature.

When a user adds your site or app to the home screen, there is an intent by the user to treat it like an app. This means you should aim to direct the user to the functionality of your app rather than a product landing page. For example, if the user is required to sign-in to your app, then that is a good page to launch.

Utility apps

The majority of utility apps will benefit from this immediately. For those apps you'll likely want them launched standalone just alike every other app on a mobile platform. To tell an app to launch standalone, add this the Web App Manifest:

The majority of games will benefit from a manifest immediately. The vast majority of games will want to launch full-screen and forced a specific orientation.

If you are developing a vertical scroller or a game like Flappy Birds then you will most likely want your game to always be in portrait mode.

If on the other hand you are building a puzzler or a game like X-Com, then you will probably want the game to always use the landscape orientation.

News sites in most cases are pure content-based experiences. Most developers naturally wouldn't think of adding a manifest to a news site. The manifest will let you define what to launch (the front page of your news site) and how to launch it (fullscreen or as a normal browser tab).

The choice is up to you and how you think your users will like to access your experience. If you want your site to have all the browser chrome that you would expect a site to have, you can set the display to browser .

If you want your news site to feel like the majority of news-centric apps treat their experiences as apps and remove all web-like chrome from the UI, you can do this by setting display to standalone .

Fake it: auto-hide the address bar

You can "fake fullscreen" by auto-hiding the address bar as follows:

This is a pretty simple method, the page loads and the browser bar is told to get out of the way. Unfortunately it is not standardized and not well supported. You also have to work around a bunch of quirks.

For example browsers often restore the position on the page when the user navigates back to it. Using window.scrollTo overrides this, which annoys the user. To work around this you have to store the last position in localStorage, and deal with the edge cases (for example, if the user has the page open in multiple windows).

UX guidelines

When you are building a site that takes advantage of full screen there are a number of potential user experience changes that you need to be aware of to be able to build a service your users will love.

Don't rely on navigation controls

iOS does not have a hardware back button or refresh gesture. Therefore you must ensure that users can navigate throughout the app without getting locked in.

You can detect if you are running in a fullscreen mode or an installed mode easily on all the major platforms.

On iOS you can use the navigator.standalone boolean to see if the user has launched from the home screen or not.

Web App Manifest (Chrome, Opera, Samsung)

When launching as an installed app, Chrome is not running in true fullscreen experience so document.fullscreenElement returns null and the CSS selectors don't work.

When the user requests fullscreen via a gesture on your site, the standard fullscreen API's are available including the CSS pseudo selector that lets you adapt your UI to react to the fullscreen state like the following

If the users launches your site from the home screen the display-mode media query will be set to what was defined in the Web App Manifest. In the case of pure fullscreen it will be:

If the user launches the application in standalone mode, the display-mode media query will be standalone :

When the user requests fullscreen via your site or the user launches the app in fullscreen mode all the standard fullscreen API's are available, including the CSS pseudo selector, which lets you adapt your UI to react to the fullscreen state like the following:

Internet Explorer

In IE the CSS pseudo class lacks a hyphen, but otherwise works similarly to Chrome and Firefox.

Specification

The spelling in the specification matches the syntax used by IE.

Keep the user in the fullscreen experience

The fullscreen API can be a little finicky sometimes. Browser vendors don't want to lock users in a fullscreen page so they have developed mechanisms to break out of fullscreen as soon as they possibly can. This means you can't build a fullscreen website that spans multiple pages because:

• Changing the URL programmatically by using window.location = "http://example.com" breaks out of fullscreen.
• A user clicking on an external link inside your page will exit fullscreen.
• Changing the URL via the navigator.pushState API will also break out of the fullscreen experience.

You have two options if you want to keep the user in a fullscreen experience:

• Use the installable web app mechanisms to go fullscreen.
• Manage your UI and app state using the # fragment.

By using the #syntax to update the url (window.location = "#somestate"), and listening to the window.onhashchange event you can use the browser's own history stack to manage changes in the application state, allow the user to use their hardware back buttons, or offer a simple programmatic back button experience by using the history API as follows:

Let the user choose when to go fullscreen

There is nothing more annoying to the user than a website doing something unexpected. When a user navigates to your site don't try and trick them into fullscreen.

Don't intercept the first touch event and call requestFullscreen() .

• It is annoying.
• Browsers may decided to prompt the user at some point in the future about allowing the app to take up the fullscreen.

If you want to launch apps fullscreen think about using the install experiences for each platform.

Don't spam the user to install your app to a home screen

If you plan on offering a fullscreen experience via the installed app mechanisms be considerate to the user.

• Be discreet. Use a banner or footer to let them know they can install the app.
• If they dismiss the prompt, don't show it again.
• On a users first visit they are unlikely to want to install the app unless they are happy with your service. Consider prompting them to install after a positive interaction on your site.
• If a user visits your site regularly and they don't install the app, they are unlikely to install your app in the future. Don't keep spamming them.

While we don't have a fully standardized and implemented API, using some of the guidance presented in this article you can easily build experiences that take advantage of the user's entire screen, irrespective of the client.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License , and code samples are licensed under the Apache 2.0 License . For details, see the Google Developers Site Policies . Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2016-10-01 UTC.

How TO - Fullscreen

Learn how to make a fullscreen window with JavaScript.

Fullscreen Window

How to use JavaScript to view an element in fullscreen mode.

Click on the button to open the video in fullscreen mode:

Try it Yourself »

Fullscreen Video

To open an element in fullscreen, we use the element .requestFullscreen() method:

Advertisement

Fullscreen Document

To open the whole page in fullscreen, use the document.documentElement instead of document.getElementById(" element ") . In this example, we also use a close function to close the fullscreen:

You can also use CSS to style the page when it is in fullscreen mode:

Related Pages

HTML DOM Reference: The requestFullscreen() method .

HTML DOM Reference: The exitFullscreen() method .

HTML DOM Reference: The documentElement property .

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Top Tutorials

Top references, top examples, get certified.

Stack Exchange Network

Stack Exchange network consists of 183 Q&A communities including Stack Overflow , the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Don't exit full screen when pressing escape in apps like Safari on Lion

In OS X Lion, pressing the ESC key exits full screen mode. Unfortunately, and especially when using Safari, ESC is used for other functions, such as in Javascript keystroke event handling. I don't want Lion to exit full screen mode when pressing escape, but I can't find a place to disable that functionality.

I already know the keyboard shortcut to Enter/exit full screen mode ( Cmd - Ctrl - F ). I want to disable the ESC shortcut. I've been Googling, but cannot find any answers.

• keyboard-shortcuts

• 2 Pressing Esc where it has a different effect (e.g. aborting page loading) does not exit full screen. –  Daniel Beck ♦ Commented Aug 2, 2011 at 15:55
• @Daniel: But that doesn't necessarily apply to any other functions. Is this actually a wide spread OS X Lion problem? Why are there so few people that are actually experiencing this? –  Tamara Wijsman Commented Aug 29, 2011 at 15:00
• 1 @Tom Such as? The user doesn't say, and neither do you. I could imagine all those functions overriding the full screen mode shortcut when used by e.g. consuming the event, but without more examples, I can't say for sure. –  Daniel Beck ♦ Commented Aug 29, 2011 at 15:24
• 13 Accidentally hit enter There are many web pages where ESC is used to close a modal window, for example: ericmmartin.com/projects/simplemodal-demos Click Demo on the page to display a modal window. Press ESC to close the modal. Safari is aware that there is a modal window, and doesn't exit full screen. Press ESC again and Safari exits full-screen mode. Often I press ESC several times to ensure something gets closed. I don't want Safari to exit full-screen mode when that happens. There is already a key command to exit full-screen. ESC shouldn't be used. –  Fadi Commented Sep 26, 2011 at 21:44
• 1 @dpk Link to a demo web page, please. Since none of the examples mentioned so far have this issue when I tested them, I don't believe that without steps to reproduce the issue. In fact, Fadi's example above contradicts your comment. –  Daniel Beck ♦ Commented Nov 3, 2011 at 16:00

13 Answers 13

Try Option Esc , which worked for me.

• 1 It doesn't trigger actions associated with the Escape key either, e.g. aborting Safari web page loading. –  Daniel Beck ♦ Commented Jan 3, 2013 at 15:20
• Awesome, this works well in Safari 13. Thanks for sharing! –  LinusGeffarth Commented Dec 30, 2019 at 11:26
• This is kinda hard to get the hang of but seems like the only solution that works well in all situations –  TimNode Commented Mar 5, 2021 at 17:12
• @DanielBeck There're usually other key bindings for those actions, e.g. aborting the loading of a page can be done by pressing cmd + . and the tab key can be used to deactivate the address bar. –  Xavier Commented Feb 26, 2023 at 12:44

I didn't find an answer for macOs Sierra and higher. So that's how i solved this issue.

As it has been already suggested i've remapped ESC to ⌥ + ESC. It does the job and even some other functions assigned to the key works. You will be able to exit fullscreen videos on some sites, but it will not abort page loading.

First you need to install Karabiner-elements to be able to remap keys

• Install brew /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
• Install cask brew tap caskroom/cask
• Install karabiner-elements brew cask install karabiner-elements

I've created custom "Complex modification" specifically for this problem. To install this modification you have to:

• Open karabiner-elements and go to "Complex modifications" tab
• Click "Add rule" button, then "Import more rules from the Internet"
• Import modification "Don't exit fullscreen when pressing ESC in Safari"

For web browsers, and specifically for use of sites with behavior that enables or requires use of the Escape key while not preventing closing of full screen (like Stack Exchange sites ), you can use the following user script:

To run this in browsers, use any user script engine for your browser.

• For Safari 5, you can use the Safari extension NinjaKit (on GitHub ). This is what I use.
• For Chrome, you can use its NinjaKit variant.
• For any other Safari on OS X, you can use the SIMBL plug-in GreaseKit . Not sure how up to date it is though.

• for convenience's sake, I uploaded this to userscripts: userscripts.org/scripts/review/178642 –  coffeejunk Commented Sep 26, 2013 at 12:18
• Any experience installing this on Safari for Mavericks? –  Holene Commented Jun 10, 2014 at 9:12
• 2 Yeah this doesn't work for me, I'm in Yosemite Beta 5 with Safari 8.0 (10600.1.25) at the time of writing, and using NinjaKit in Safari as the userscripts engine. Escape key keeps on breaking full screen and for me it's happening when I'm in address bar and press Esc while in it. (it has a few useful functions when editing text in it...) I'm assuming GreaseKit no longer works given it's dated to 2009 and a quick google seems to indicate it doesn't work anymore. Any ideas? So frustrating, no wonder Chrome is the go-to primary browser, even on Apple's own operating system... –  user78017 Commented Oct 8, 2014 at 7:29
• @foregon I'd expect page event handling to have absolutely no effect while you're in the address bar. –  Daniel Beck ♦ Commented Oct 8, 2014 at 12:18
• works with tampermonkey, edited the script/response to support https:// as well. –  Toni Commented Jul 2, 2018 at 16:47

Most situations native to OS X accept both Escape and Cmd-. to abort, e.g. file dialogs, Safari loading, dragging elements around, etc.

Notably absent from that list is, of course, leaving full screen mode .

So you could just learn to press Cmd-. instead of Escape to avoid this situation altogether. Or you can teach your computer to do it for you: An at least somewhat sane solution is to use e.g. Butler 's Keystrokes item to map Escape to Cmd-. :

• Open Butler's configuration page
• Select any container, e.g. Hidden , click + » Smart Item » Keystrokes
• On the Keys tab, press Cmd-. to use this as the resulting keystroke when activating this item
• On the Triggers tab, select the Hot Key input field and press Escape . Ignore the warning that basically states you're insane.
• Remember to add e.g. Terminal to the exceptions list — it totally ignores Escape for leaving full screen, but pressing Ctrl-. translates to Ctrl-C !

In some situations, things will misbehave. Remapping the key to what's usually an equivalent keyboard shortcut is a sledgehammer solution. Quick Look , for example, doesn't handle Cmd-. (and therefore the remapped Escape for closing file previews); renaming files in Finder cannot be aborted anymore using Escape , nor selections e.g. in Finder be cleared.

In limited testing, I found no situation where pressing Cmd-. actually leads to undesirable actions being performed, but be aware that these probably also exist.

• Of course, you could completely ignore all Escape keypresses like this, but that'll lose a good bit of functionality... –  Daniel Beck ♦ Commented Nov 23, 2011 at 11:34
• ⌘ + . exits full screen mode for me in Opera, so this is a no go :( –  Andy E Commented Mar 1, 2017 at 10:22

EASY, found it! KeyboardMaestro with 2 actions

When pressing " ESC " Simulate pressing (instead): - " CMD +." - THEN also " ALT + ESC "

You need both, because some app react only to one order or the other (sometimes to none, then nothing possible) -- >this way most apps will do like an " ESC " in their context, but you will never get exited from the full screen mode

Your possible options include:

Set alternative shortcuts for the other functions, because ESC is reserved by the OS and Browser.

Adjust the source / assembler machine code to rebind the ESC key of the OS and Browser.

File the bug/feature request against application developer (i.e. Google spreadsheets) to consume ESC event instead of letting it through.

File a bug with Apple, because the applications were here first, and Apple re-purposed the key without cause.

• 3 #1 I can get behind. #2 is almost tongue-in-cheek to the point of laughter. –  peelman Commented Sep 7, 2011 at 19:05
• Well, your mileage may vary. –  Tamara Wijsman Commented Sep 7, 2011 at 23:30
• Functions using Escape are not usually available from the menu bar, and Escape does not trigger menu items as is obvious from the missing "flash" highlighting the menu bar item containing the triggered item. –  Daniel Beck ♦ Commented Sep 18, 2011 at 14:50
• #4 File a bug with Apple, because the applications were here first, and Apple re-purposed the key without cause. –  internetdotcom Commented Nov 5, 2011 at 16:12

Just to flesh out the description a bit more.

ESC is used to cancel a drag, esc is used to cancel a dialog box, esc is used during a drag to cancel a move/copy, esc is used in terminal in VI to cancel an editing command

So, there are numerous uses. It is a weird oddity that Apple has this cancel full screen mode when that is possible by ctrl-cmd-F and the upper right icon.

This seems to be on an app by app basis Mail and Safari and other iLife items will exit full screen. iTunes stays full screen.

Reeder ignores the esc for the purpose of Full window control, and does other appropriate things for the program. Evernote does not even have a cmd-F or ctrl-cmd-F for window control, its the icon and the esc key.

You can't seem to map esc by itself to some non-harmful nonsense action in the keyboard control panel.

• 1 In Safari, mapping the Escape key to a benign function doesn't seem to be a solution. Regardless of the action, it will still drop out of Full Screen. –  peelman Commented Sep 7, 2011 at 19:02
• And again, pressing Escape to cancel dialogs does not exit full screen . –  Daniel Beck ♦ Commented Sep 18, 2011 at 14:38
• Pressing Escape in Terminal does not exit full screen . –  Daniel Beck ♦ Commented Sep 18, 2011 at 14:39
• Using Escape to cancel a drag does not exit full screen . Have you even tried it before posting these claims? –  Daniel Beck ♦ Commented Sep 18, 2011 at 14:39
• Using Escape in Reeder to e.g. return from an article web page to the RSS item does not exit full screen . If Escape is not used for such an action, it exits full screen. As in ALL OTHER PROGRAMS . –  Daniel Beck ♦ Commented Sep 18, 2011 at 14:42

It looks like you're using JQuery. In that case:

Listen for keydown events (keypress and keyup won't work) on the document with keyCode 27 , and when the event fires call e.preventDefault() .

• Related request on MSO , works without jQuery. –  Daniel Beck ♦ Commented Jan 23, 2012 at 20:18

I decided to have esc routed to alt/option + esc . For the most part, this lets me get out of YouTube vids, and if you have a Squarespace account, it lets you login without getting out of full screen.

• Download and install Karabiner .
• Go to the right most "Misc & Uninstall" tab.
• Click on the button that says "Open private.xml".
• Download the private.xml file from here
• Replace the original "private.xml" file in Finder with the downloaded file. Voila!

Use BetterTouchTool or KeyboardMaestro or something similar to remap Esc to ⌥ + Esc .

After some desperate search for the solution, I consign Safari to a separate virtual desktop with Mission control. This mitigates the ESC problem and is by far the best approximation to a fullscreen Safari window.

Bonus space if you hide the Dock.

This is the same as the @aditya-srinivasan answer targeting Opera

See @aditya-srinivasan answers on the downloading https://pqrs.org/osx/karabiner/index.html.en

Use the combination ⌘+esc (cmd+esc) ( ⌥+esc (opt+esc) also works)

This allows the webpage to "esc" whatever is selected (ie: the editing of cells in Google Sheets) without affecting the browser.

Works on Ventura 13.2 with Safari 16.3.

You must log in to answer this question.

Not the answer you're looking for browse other questions tagged keyboard-shortcuts osx-lion fullscreen ..

• Featured on Meta
• Upcoming initiatives on Stack Overflow and across the Stack Exchange network...
• Announcing a change to the data-dump process

Hot Network Questions

• What is the light mentioned in the beginning of the book of Genesis
• Use of generic "one" without having to revel the gender
• Accommodating whiteboard glare for low-vision student
• How did Sirius Black bring the Weasley family picture back from Azkaban?
• Can a festival or a celebration like Halloween be "invented"?
• how to find the angle between faces in order to set it in smooth by angle modifier to shade the faces we want instead of using ignore sharpness?
• Confusion about the probability of a continuous random variable at a given point
• Story about Jesus being kidnapped by the church
• Is "double-lowercase-L" a ligature (Computer Modern Italic)?
• A web site allows upload of pdf/svg files, can we say it is vulnerable to Stored XSS?
• Does the oven temperature for a lasagna really matter?
• Why does RBF rule #3 exist?
• On the Lipschitz constant outside the stretch set
• Cost Sharing Application in Python
• Why is this outlet required to be installed on at least 10 meters of wire?
• Why do the Fourier components of a piano note shift away from the harmonic series?
• Why do cubic equations always have at least one real root, and why was it needed to introduce complex numbers?
• What happened to the job market for assembly programmers once high level languages became mainstream?
• Is there a minimal (least?) countably saturated real-closed field?
• Can a MicroSD card help speed up my Mini PC?
• Can a star be made of sun spots?
• Why does ansible reevaluate a variable on each access
• RegionPlot does not work appropriately
• Why doesn't sed have a j command?

• DSA with JS - Self Paced
• JS Tutorial
• JS Exercise
• JS Interview Questions
• JS Operator
• JS Projects
• JS Examples
• JS Free JS Course
• JS A to Z Guide
• JS Formatter

How To Change The Browser To Fullscreen with JavaScript?

In web development, there may be scenarios where you want to display your web application or a specific element in full-screen mode, covering the entire browser window. This can be useful for creating immersive experiences, such as games, presentations, or video players. JavaScript provides a built-in Fullscreen API that allows you to toggle the full-screen mode programmatically.

• In this approach, we are using the Fullscreen API.
• The Fullscreen API provides a standardized way to control the full-screen mode of an element or the entire browser window. It consists of several methods and events that you can use to manage the full-screen state.
• The script attaches an event listener to the fullscreen button.
• It utilizes the Fullscreen API to enter and exit fullscreen mode based on the current state.
• The button text dynamically changes between “Enter Fullscreen” and “Exit Fullscreen” to reflect the current action.

Example: Implementation to change the browser to fullscreen by using the fullscreen API.

Please Login to comment...

Similar reads.

• Web Technologies

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

Disabling 'esc to exit fullscreen' shortcut on macOS

The ESC key seems to universally exit fullscreen view. E.g. I have multiple fullscreen 'spaces' with a window occupying each. One of these is a browser. Pressing ESC at any time during my browsing session causes the whole fullscreen space to be exited. I can't find a way to disable this in System Preferences. It's very frustrating.

MacBook Pro 14″

Posted on Jul 24, 2023 3:13 AM

Posted on Jul 24, 2023 5:01 AM

You can't do what you want. It's baked into the OS. You're welcome.

Similar questions

• How to rid-off the accessibility keyboard shortcut from the menu bar at the top of OSX Ventura? I have this shortcut left after playing around with keyboard settings. Any help to get rid of that keyboard selection (or rather input sources) would be much appreciated. 401 4
• How to change Control–Command–Space bar? Hi There, How do we change the shortcut for Control–Command–Space bar or turn it off? If we go to System Prefs > Keyboard > Shortcuts the shortcut isn't listed. Any help would be much appreciated. Cheers 4240 9
• Esc key not working for normal cancel/escape functions? Using the keyboard viewer from the menu bar, I can see that the Esc is registering when pressed (i.e., this is not a hardware issue), but it is not performing the normal functions, such as: Canceling / exiting out of Spotlight Canceling a screenshot selection Escaping from having the cursor in address bar in Safari Why is this and how can I fix this / restore typical expected escape behavior of the Esc key that I have on a different Macbook with macOS Big Sur. Device: MacBook Pro (14-inch, 2021) OS: macOS Monterey (version 12.2.1) 1047 3

Loading page content

Page content loaded

Jul 24, 2023 5:01 AM in response to danielw97

Jul 24, 2023 4:30 AM in response to danielw97

As the User ( daniel97 ) has marked one of the above replies as Best Answer a few things generally occur.

1 - This would indicate to Other Contributors that the Original question is solved and no further assistance is needed .

2 - This could also effectively cut off other Contributors from offering additional insights or explanations

To get a more full understanding on how the Apple Support Community Forums function.

Suggest taking the time to explore the information in below link

How to use Apple Support Communities

Jul 24, 2023 3:53 AM in response to danielw97

Even some of the best solutions on YouTube only seem to have a solution for Safari (and even then it's hacky) - nobody seems to be aware of any system-wide solution.

https://www.youtube.com/watch?v=uZBe8SfvdLc

Jul 24, 2023 5:49 AM in response to danielw97

The only way I can think to do this is to use a utility, such as Karabiner, Keyboard Maestro, BetterTouchTool, etc, and either totally disable the Escape key, or if you want the escape key for some apps, use one of the utilities to customize each app that you want to disable escape.

Jul 24, 2023 6:51 AM in response to danielw97

As you can see from much of the chatter, the ability to Disable the ESC Key function may require s ome Third Party Application(s) to achieve this goal.

Otherwise, without Third Party Application(s) intervention - not possible

Jul 24, 2023 3:29 AM in response to danielw97

You are right, not explanation

The ESC Key is only a key being depressed by the user.

AFAIK - you would have to Reassign the ESC key function to some Other Function - if that can be done.

That or do not use the ESC key when in Full Screen Mode

Created Shortcut is not my forte

Jul 24, 2023 5:33 AM in response to danielw97

FWIW, there are a number of keyboard mapping apps for Macs that may be able to disable the Esc key such as Keyboard Maestro, Ukelele and Karabiner Elements which may suit your need. Feel free to check them out. Of course disabling the Esc key will prevent it from being used for its other functions. Not just leaving Full Screen.

Jul 24, 2023 6:19 AM in response to BobHarris

Additionally, to all the other suggestions, Another app that might be able to achieve this is called "Typinator"

https://www.ergonis.com/products/typinator/

But agree that by doing so would disable the Escape Function system wide until changed back to its default settings.

Jul 24, 2023 6:31 AM in response to Randall_2023

Randall_2023 wrote:

FWIW, Typinator is a text expansion tool. Nothing to do with keyboard remapping.

Mar 15, 2024 6:25 PM in response to danielw97

Here is what ChatGPT told me, asking it how to use Karanbiner to solve this. It works for me (yay yay finally!!!)

To prevent the "Esc" key from causing Safari to exit full-screen mode using Karabiner-Elements on a Mac, you'll directly create a custom configuration. Here's how you can set it up:

### Step 1: Install Karabiner-Elements

### Step 2: Open Karabiner-Elements

Launch Karabiner-Elements from your Applications folder or via Spotlight search.

### Step 3: Navigate to the Configuration File

Since there's no community rule for this specific need, you'll edit the configuration file (`karabiner.json`) directly:

- This file is located at `~/.config/karabiner/`.

- Open `karabiner.json` in your preferred text editor.

### Step 4: Add Your Custom Rule

You're going to add a custom rule to this JSON file. Look for the `profiles` section, and within your current profile, find the `rules` array to add a new rule.

Add the following JSON snippet as a new element in the `rules` array. This rule effectively disables the "Esc" key in Safari by remapping it to do nothing when Safari is the frontmost application:

"title": "Custom Modifications",

"description": "Disable Esc in Safari to prevent exiting full-screen",

"manipulators": [

"type": "basic",

"key_code": "escape",

"modifiers": {

"optional": ["any"]

"key_code": "vk_none"

"conditions": [

"type": "frontmost_application_if",

"bundle_identifiers": ["^com.apple.Safari$"]

### Step 5: Save and Apply Changes

After adding the rule to your `karabiner.json` file, save the changes. Karabiner-Elements should automatically detect the update and apply the new configuration. If it doesn't, you might need to restart Karabiner-Elements.

### Important Notes:

- This solution specifically targets disabling the "Esc" key within Safari. It's a direct approach to your request, designed to prevent Safari from exiting full-screen mode when "Esc" is pressed.

- Given the specific nature of this modification, it's unlikely to have unintended side effects outside of Safari. However, be mindful of any scenarios where you might need the "Esc" key to function normally within Safari.

- Always back up your `karabiner.json` file before making modifications, allowing you to revert to your original settings if needed.

This method offers a targeted solution for your issue with Safari and full-screen mode. Should you encounter unexpected behavior or need further customizations, you might need to adjust the rule accordingly.

[Edited by Moderator]

Jul 24, 2023 3:39 AM in response to PRP_53

This just explains how to enter and exit fullscreen. It doesn't explain how to disable the ESC shortcut.

Jul 24, 2023 3:55 AM in response to PRP_53

Reliability is irrelevant when the channel doesn't actually contain anything related to this particular issue.

Jul 24, 2023 4:39 AM in response to PRP_53

This is completely irrelevant. The issue at hand has nothing to do with function keys or how to use them.

Jul 24, 2023 3:21 AM in response to danielw97

The Apple documentation on using Full Screen mode

Use apps in full screen on Mac - Apple Support (CA)

Jul 24, 2023 3:51 AM in response to danielw97

Further information on using the keyboard

Use keyboard function keys on Mac - Apple Support (CA)

How to Make the Window Full Screen with Javascript

Making an element in the page to go to a full screen window can be achieved using Javascript Fullscreen API.

Quick Sample Code

Tutorial in detail.

Full-screen can be activated for the whole browser window by pressing the F11 key. It can be exited by pressing the Esc button.

It is also possible to make a specific element in the page to enter and exit full-screen mode programmatically using Javascript Fullscreen API.

This tutorial discusses the methods, properties and events available in the Fullscreen API.

Example of Fullscreen API

Javascript fullscreen api.

The Fullscreen API provides functions to enter and exit full-screen mode, as well as an event to detect full-screen state change.

Also specific CSS can be applied to an element that goes in full-screen mode.

• Element .requestFullscreen function can make an element go to full-screen mode.
• document.exitFullscreen function can exit full-screen.
• document.fullscreenElement property holds the element which is currenly in full-screen.
• fullscreenchange event can detect when element enters and exits full-screen mode.
• fullscreenerror event can detect errors when entering and exiting full-screen mode.
• document.fullscreenEnabled property tells whether full-screen can be enabled in the current page or not.
• :fullscreen and ::backdrop CSS properties handle styling when element enters full-screen.

Going Into Full-Screen

We can request an element in the page to go into full-screen using the Element.requestFullscreen function. Element refers to the DOM element.

This function is asynchronous, and returns a Promise. The Promise is resolved when the element successfully enters full-screen mode. The Promise is rejected if an error occurs.

By default, the browser navigation UI will be hidden in full-screen mode. However it is possible to keep the navigation UI in fullscreen mode also, by using the navigationUI parameter.

navigationUI parameter can have 3 values :

• "hide" : Hide the browser navigation UI
• "show" : Show the browser navigation UI
• "auto" : The default behaviour applied by browser

Exiting Full-Screen

We can exit full screen using the document.exitFullscreen function. Note that this function is not called on the element, but rather the document object.

This also is an asynchronous function, and returns a Promise. The Promise is resolved when the element exits full-screen mode and rejected in case of an error.

Check Which Element is in Full-Screen

We can assign many elements in your page to use full-screen mode. However we might want to know which element is currently being displayed in full-screen mode. document.fullscreenElement is a read-only property that returns the DOM Node of that element.

If the page is not in full-screen mode, null is returned.

Check Whether Full-Screen Activated Currently

To find out whether full-screen is currently activated, we can find the element which is in full-screen. If such an element is found, it means full-screen is activated, otherwise full-screen is deactivated.

Event to Detect Full-Screen State Changes

fullscreenchange event detects change in full-screen mode. This event can be applied to the document or to specific elements.

Check Whether Full-Screen is Allowed in the Page

Sometimes due to restrictions placed, it may not be possible to enter full-screen mode for the current page. The document.fullscreenEnabled property returns a boolean true or false indicating whether full-screen is available or not.

CSS for Elements in Full-Screen

When an element enters full-screen mode, specific CSS styles can be applied to them.

The :fullscreen CSS pseudo class can be used to style elements when they enter full-screen mode.

When an element enters fullscreen, it may have a default black backdrop. The ::backdrop CSS pseudo-element can be used to customize element's backdrop styles.

Browser Compatibility for Full-Screen API

Javascript Full-screen API is available for all major browsers, with some exceptions :

• Safari does not return a Promise when entering and exiting full screen mode.
• Safari does not support ::backdrop CSS.
• Safari does not support :fullscreen CSS. It supports the prefixed non-standard :full-screen CSS.

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free

Element: fullscreenchange event

Limited availability.

This feature is not Baseline because it does not work in some of the most widely-used browsers.

• See full compatibility
• Report feedback

The fullscreenchange event is fired immediately after an Element switches into or out of fullscreen mode.

This event is sent to the Element which is transitioning into or out of fullscreen mode.

To find out whether the Element is entering or exiting fullscreen mode, check the value of Document.fullscreenElement : if this value is null then the element is exiting fullscreen mode, otherwise it is entering fullscreen mode.

This event is not cancelable.

Use the event name in methods like addEventListener() , or set an event handler property.

A generic Event .

In this example, a handler for the fullscreenchange event is added to the element whose ID is fullscreen-div .

If the user clicks on the "Toggle Fullscreen Mode" button, the click handler will toggle fullscreen mode for the div . If document.fullscreenElement has a value it will exit fullscreen mode. If not, the div will be placed into fullscreen mode.

Remember that by the time the fullscreenchange event is handled, the status of the element has already changed. So if the change is to fullscreen mode, document.fullscreenElement will point to the element that is now in fullscreen mode. On the other hand, if document.fullscreenElement is null, fullscreen mode has been canceled.

What that means to the example code is that, if an element is currently in fullscreen mode, the fullscreenchange handler logs the id of the fullscreen element to the console. If document.fullscreenElement is null, the code logs a message that the change is to leave fullscreen mode.

Specifications

Browser compatibility.

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

• Document: fullscreenchange event
• Element: fullscreenerror event
• Fullscreen API
• Guide to the Fullscreen API