Question

我有一个模态，上面有一个输入框。模式会根据浏览器窗口的大小进行缩放。

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

我尝试设置输入宽度，但是看起来它是以字符设置的。因此，尽管我可以使用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>

“有点”有效，但并非如此。

我想输入要居中的字段，并且每边都稍有距离（即比窗口小一些的固定大小），但要使其扩展到窗口的大小。

Answer 1

也许您可以尝试使用CSS：

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

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

我想输入要居中的字段，并且每边都稍有距离（即比窗口小一些的固定大小），但要使其扩展到窗口的大小。

尝试：#AAA { width: 90%; margin: auto; }。
还要检查其是否包含干扰样式的min-width或max-width。
请记住检查输入父对象的宽度（可能是模式包装器）。请注意，#AAA将具有其元素width: 90%;。

希望有帮助。

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

1 个答案: