时间戳

首页 > 解决方案 > 将输入字段的宽度调整为模态

javascript - 将输入字段的宽度调整为模态

问题描述

我有一个用输入框定义的模式。模态缩放到浏览器窗口的大小。

但是，现有代码允许输入窗口比模态窗口更宽。

我试过设置输入宽度，但看起来它是用字符设置的。因此，虽然我可以使用 JavaScript 缩小它的大小，但它并不能很好地工作。

    <body onresize="myFunction()">
    <body onload="myFunction()">

    <p id="demo"></p>

    <input id="AAAA" placeholder="Enter email address"></input>

    <script>
    function myFunction() {

    var w = window.outerWidth;
    var xx = (w-100);

    document.getElementById("AAAA").width = xx;
    //  document.getElementById("AAAA").size = (w-75)/8;
    }
    </script>
    </body>
    </html>

它“有点”有效，但不是真的。

我想将输入字段居中，并且每边都有一点距离（即，固定大小比窗口小），但要以其他方式扩展到窗口大小。

标签： javascript

解决方案

也许你可以再试一次css：

但是，现有代码允许输入窗口比模态窗口更宽。

  • 输入的宽度可能基于vw，即视口宽度的百分比。

我想将输入字段居中，并且每边都有一点距离（即，固定大小比窗口小），但要不然它会扩展到窗口的大小。

  • 试试：#AAA { width: 90%; margin: auto; }。
  • 还要检查它是否包含干扰样式的min-width或。max-width
  • 并记得检查 input-s 父级（可能是模态包装器）的宽度。考虑到#AAA将有width: 90%;其元素。

希望能帮助到你。

推荐阅读