gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 00:45:37 29 4
gpt4 key购买 nike

我试图根据用于查看网页的设备来设置文本框大小。我的网页在所有平台上都能正常呈现,但移动设备上的文本框太宽。

我研究了这个论坛,发现了一些代码片段,这些代码片段帮助我找到了一个可行的解决方案,但它并不理想,但表明我走在正确的道路上。目前我正在使用“onkeyup”功能,但我更愿意拥有一种“onload”功能,但我通过研究这个论坛知道这是不可能的。我尝试过使用“document.getElementById”,但不知道如何使用它来更改属性“size”。感谢任何建议 - 这是我的代码:

功能:

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

这可以工作,但并不优雅 - 更确切地说是找到一些东西来代替“onkeyup”。谢谢。

最佳答案

使用 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,然后转到名为“仿真”的最后一个选项卡。在“显示”部分下,您可以选择较低的分辨率,并且输入的大小将会改变。

关于javascript - 根据设备动态更改文本框大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27439065/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com