Question

如何在没有Jquery或任何库的情况下制作全屏textarea？

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>

Answer 1

'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>

只需将textarea的宽度和高度设置为100vw（屏幕宽度）和100vh（屏幕高度）。

或者，您可以使用window.innerWidth和window.innerHeight代替这些值。

Answer 2

您可以更改css样式以制作全屏textarea

＆＃13;

var el = document.getElementById('el')

const fullScrenn = () => {
	  el.style = "width: 100%; height: 100%; position: fixed;" 
}

＆＃13;

<textarea id="el" cols="30" rows="10"></textarea>

<button onclick="fullScrenn()">Full Screen</button>

＆＃13;

Answer 3

您可以使用以下属性添加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>

Answer 4

<强>使用Javascript：

＆＃13;

document.querySelector('#myButton').addEventListener('click', () => {
  document.querySelector('#myTextarea').style.width= window.innerWidth+"px";
  document.querySelector('#myTextarea').style.height= window.innerHeight+"px";
});

＆＃13;

<textarea id="myTextarea" cols="20" rows="20"></textarea>
<button id="myButton">Full Size</button>

＆＃13;

Javascript和Css：

＆＃13;

document.querySelector('#myButton').addEventListener('click', () => {
  document.getElementById("myTextarea").className += " fullscreen";
});

＆＃13;

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

＆＃13;

<textarea id="myTextarea" cols="20" rows="20"></textarea>
<button id="myButton">Full Size</button>

＆＃13;

Answer 5

此处的代码段以及在iframe中运行的其他在线IDE（几乎全部都是这样）不允许全屏代码工作。因此，为了使此演示工作，您需要将n贴片复制到真实网站，或者也可以在本地进行。

这是使用fullscreen API，这是一个真正的全屏

演示

由于SO安全措施而失效（iframe上没有allowfullscreen）

<!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>

没有JQuery的全屏文本区域

5 个答案:

演示