Question

我试图根据用于查看我的网页的设备来设置文本框大小。我的网页在所有平台上都可以令人满意地在移动设备上的文本框太宽了。

我已经研究过这个论坛并找到了一些代码片段，这些代码片段帮助我找到了一个有效的解决方案，但这并不理想，但却向我展示了我正确的道路。目前我正在使用功能＆＃39; onkeyup＆＃39;但我更喜欢有一种类型的“onload”＆＃39;功能，但我知道从研究这个论坛，这是不可能的。我尝试过使用＆＃39; document.getElementById＆＃39;但无法看到我如何使用它来更改属性＆＃39; size＆＃39;。感谢任何建议 - 这是我的代码：

功能：

function resize(obj){

var textboxlength;

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {

textboxlength=20;
}
else
{
textboxlength=60;
};
obj.size=textboxlength;
console.log(textboxlength);
}

这是输入实体：

<input type="TEXT" autocomplete="off" name="message" id="AJH1" size="10" onkeyup="resize(this)">

<input type="SUBMIT" value="Ask">

这种方法有效但不优雅 - 更确切地说，找到要替换的内容＆＃39; onkeyup＆＃39;。感谢。

Answer 1

使用CSS为您处理响应式设计更加轻松和恰当。您可以通过定义设备的屏幕分辨率查询来实现它。完整的例子：

<html>
<head>
<style>
    @media (max-width: 900px) {
        #AJH1 {
            width:20px;
        }
      }

    @media (min-width: 901px) {
        #AJH1 {
            width:60px;
        }
    }
</style>
</head>
<body>
    <input type="TEXT" autocomplete="off" name="message" id="AJH1">
    <input type="SUBMIT" value="Ask">
</body>

您可以找到更多示例和示例here

如果你想测试它IE11有一些很好的开发工具。使用此代码打开文件按F12，然后转到名为＆＃34; Emulation＆＃34;的最后一个选项卡。在＆＃34;显示＆＃34;部分你可以选择较低的分辨率，输入的大小也会改变。

根据设备动态更改文本框大小

1 个答案: