All geek questions in one place

Full screen text area without jQuery

How to create a full-screen text box without jQuery or any library?

let el = document.getElementById('#t')

const fullScrenn = () => {
	  //there way to do that . 
}
 
<textarea id="el" cols="30" rows="10"></textarea>

<button onclick="fullScrenn()">Full Screen</button>
Run codeHide result

enter image description here

+4
source share
5 answers

'use strict';
document.querySelector('#myButton').addEventListener('click', () => {
  document.querySelector('#myTextarea').style.width="100vw";
  document.querySelector('#myTextarea').style.height="100vh";
});
<textarea id="myTextarea" cols="20" rows="20"></textarea>
<button id="myButton">Full Size</button>
Run codeHide result

Just set the width and height textareato 100vw(screen width) and 100vh(screen height).

Alternatively, you can use window.innerWidthand window.innerHeightinstead of these values.

+3
source

You can change the css style to create a fullscreen text field

var el = document.getElementById('el')

const fullScrenn = () => {
	  el.style = "width: 100%; height: 100%; position: fixed;" 
}
<textarea id="el" cols="30" rows="10"></textarea>

<button onclick="fullScrenn()">Full Screen</button>
Run codeHide result
+3
source

css class .

.fullscreen{
   width:100%;
   height:100%;
   position:fixed;
}

, fullscreen textarea.

var el = document.getElementById('el')

const fullScrenn = () => {
	  el.className+="fullscreen"; 
}
.fullscreen{
  width:100%;
  height:100%;
  position:fixed;
}
<textarea id="el" cols="30" rows="10"></textarea>

<button onclick="fullScrenn()">Full Screen</button>
Hide result
+1

JavaScript:

document.querySelector('#myButton').addEventListener('click', () => {
  document.querySelector('#myTextarea').style.width= window.innerWidth+"px";
  document.querySelector('#myTextarea').style.height= window.innerHeight+"px";
});
<textarea id="myTextarea" cols="20" rows="20"></textarea>
<button id="myButton">Full Size</button>
Hide result

Javascript Css:

document.querySelector('#myButton').addEventListener('click', () => {
  document.getElementById("myTextarea").className += " fullscreen";
});
.fullscreen{ 
    width:100%;
   height:100%;
   position:fixed;
}
<textarea id="myTextarea" cols="20" rows="20"></textarea>
<button id="myButton">Full Size</button>
Hide result
+1

The snippet here, as well as another interactive IDE running in an iframe (which almost all of them do), do not allow full-screen code to work. Therefore, to see this demo for work, you need to copy the n insert to the real site or you can also do it locally.

It uses full screen API , it is real full screen

Demo

Doesn't work due to SO security measures (not allowfullscreenin iframe)

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
  <style>
    #t:-webkit-full-screen {
      min-width: 100%;
      min-height: 100%;
      display: block;
    }
  </style>
</head>

<body>



  <textarea id="t" cols="30" rows="10"></textarea>

  <button id='btn'>Full Screen</button>




  <script>
    var el = document.getElementById('t');

    document.getElementById('btn').onclick = function() {
      fs(el);
    };

    var fsActive = function() {
      return !!(document.webkitFullscreenElement || document.mozFullScreenElement || document.fullscreenElement);
    };


    function fs(target) {
      if (!fsActive()) {

        if (target.webkitRequestFullscreen) {
          target.webkitRequestFullscreen();
        } else if (target.mozRequestFullScreen) {
          target.mozRequestFullScreen();
        } else if (target.requestFullscreen) {
          target.requestFullscreen();
        }

      } else {
        if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.exitFullscreen) {
          document.exitFullscreen();
        }
      }
    }
  </script>
</body>

</html>
Run codeHide result
+1
source

Source: https://habr.com/ru/post/1678402/

More articles:


All Articles