当前位置： 文江博客话题详情

如何动态调整输入标签的大小

发布于 2024-10-09 19:10:27 字数 123 浏览 2 评论 0原文

我在输入标记内显示了一个动态链接。如何使输入标签调整大小以适应链接的宽度？

alt text

谢谢

原文

I have a dynamic link displayed inside an input tag. How can I make the input tag resize to take the width of the link?

alt text

Thanks

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

苏璃陌 2024-10-16 19:10:28

您可以使用 body onload 来确定大小...

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example</title>

<script type="text/javascript">
window.onload = function() {
thelink = document.getElementById('MyLink');
linksize = thelink.value.length;
if (linksize < 10) thelink.size = 10;
if (linksize > 50) thelink.size = 50;
}
</script>
</head>

<body>
<input id="MyLink" type="text" value="http://www.domain.com/this/is/a/very/long/link/example" />
</body>

</html>

只需设置最小和最大大小即可保持页面样式...

You can use a body onload to determine the size....

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example</title>

<script type="text/javascript">
window.onload = function() {
thelink = document.getElementById('MyLink');
linksize = thelink.value.length;
if (linksize < 10) thelink.size = 10;
if (linksize > 50) thelink.size = 50;
}
</script>
</head>

<body>
<input id="MyLink" type="text" value="http://www.domain.com/this/is/a/very/long/link/example" />
</body>

</html>

jus tset your minimum and maximum size for maintaining page style....

回复 原文
梦幻的味道 2024-10-16 19:10:28

也许您可以创建一个样式相同的隐藏 ，然后读取其宽度（因为它会根据其内容进行调整）并将宽度分配给 。

Perhaps you can create a hidden <span> identically styled, then read its width (because it adjusts to its contents) and assign the width to the <input>.

回复 原文
~没有更多了~

关于作者

北风几吹夏

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

linfzu01

文章 0 评论 0

§对你不离不弃

文章 0 评论 0

可遇━不可求

文章 0 评论 0

枕梦

文章 0 评论 0

qq_3LFa8Q

文章 0 评论 0

JP

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文