How to disable right click/text highlight
June 25, 2020 | Beaver Builder, Beaver Themer, Tips & Tricks, Troubleshooting, WooCommerce, WordPress
NOTE: This should not be done unless the customer is insistent and they have completed all other site changes not including products and posts, as these live inside of a template.
Disable Right Click
Disable Right Click on Module:
If the customer is focused on disabling right click on a single module, the only module at this time that has this built in is the Standard Slideshow module.
This should be the first choice for disable right click.
Disable Right Click on a Single Page/Layout:
If only one page or themer layout needs Right Click Disabled follow the steps below:
- Save the current page template with the following format “Page Name MM/DD/YYYY”
- For instructions on how to save a template review the section Save a Custom Layout Template
- Now go to the page settings at the top left of the screen and choose “Layout CSS & Javascript” option.
- Or on your keyboard press ‘CRTL + Y’
- In the Javascript tab enter the following code, save, and publish:
document.addEventListener('contextmenu', event => event.preventDefault());
If any issues occur on publish where you cannot access Beaver Builder, please either restore the page or layout to before the edit was made or create a new page/layout with the saved template. Open a Technical Clarification for further assistance.
Please also add the following code to the TOP of the Additional CSS tab of Customizer, as a way of communicating that a disable right click code in place.
/*---Disable Right Click JS In Place On [Page Name or Layout]---*/
Disable Right Click Everywhere:
This method should be the last resort, and only put in place after all site changes have been made as it makes troubleshooting very difficult.
Add the following code to the JavaScript Code tab in the Code section of the Customizer.
document.addEventListener('contextmenu', event => event.preventDefault());
Please also add the following code to the TOP of the Additional CSS tab of Customizer, as a way of communicating that a disable right click code in place.
/*---Disable Right Click JS In Place---*/
Disable Text Highlight:
Be aware, this action will effect the entire site. Paste this code into the Additional CSS tab of Customizer, under the Typography section at the top of the template.
/*---Disable Text Highlight---*/
body {
user-select: none;
}