Fullscreen textareas

As of the date of this post, this solution likely will not work on your mobile device. However, here’s a quick and easy way to add a distraction-free, fullscreen writing mode to your website (if you have any frontend textareas for users).

The code provided will allow users to double-click or double-tap any textarea on a webpage, which will then open in full-screen mode. Pressing the “esc” key will return the textarea to its normal size, while retaining any text entered in full-screen mode. The code can be easily added to the footer of any website between <script></script> tags.

// Get all the textareas on the page
const textareas = document.querySelectorAll('textarea');

// Add event listeners to each textarea
textareas.forEach(textarea => {
  textarea.addEventListener('dblclick', () => {
    toggleFullScreen(textarea);
  });
});

// Function to toggle full-screen mode
function toggleFullScreen(textarea) {
  if (!document.fullscreenElement) {
    // Enter full-screen mode
    if (textarea.requestFullscreen) {
      textarea.requestFullscreen();
    } else if (textarea.mozRequestFullScreen) {
      textarea.mozRequestFullScreen();
    } else if (textarea.webkitRequestFullscreen) {
      textarea.webkitRequestFullscreen();
    } else if (textarea.msRequestFullscreen) {
      textarea.msRequestFullscreen();
    }
  } else {
    // Exit full-screen mode
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  }
}

// Add event listener for the "esc" key to exit full-screen mode
document.addEventListener('keydown', event => {
  if (event.key === 'Escape') {
    exitFullScreen();
  }
});

// Function to exit full-screen mode
function exitFullScreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}

The code above starts by selecting all the textareas on the page using the querySelectorAll method. Then, it adds a double-click event listener to each textarea, which calls the toggleFullScreen function.

The toggleFullScreen function checks if the document is currently in full-screen mode using the fullscreenElement property. If it is not, it enters full-screen mode by calling the appropriate method based on the browser. If the document is already in full-screen mode, it exits full-screen mode using the corresponding method.

To handle the “esc” key press, we add an event listener to the document object. When the “esc” key is pressed, the exitFullScreen function is called, which exits full-screen mode using the appropriate method based on the browser.

Will it work on your favorite browser? Check here.

Leave a Reply Cancel reply