代码之家 › 专栏 › 技术社区 › Maxxx

如何根据具有固定字符数但字体大小可能不同的输入调整文本框宽度?

css html javascript

Maxxx · 技术社区 · 4 年前

所以我 从服务器响应接收文本 :

属于 11 如上所述,我想在HTML文本框中显示它。

然而,我想要的是,一开始 文本框的宽度为0px 当我收到服务器发来的短信时,我会的 将其附加到文本框 在哪里 文本框的宽度 大致等于 文本宽度

我怎么办 设置文本框的宽度,使其大致等于文本的宽度 ?

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
    font-size: 1vw;
}

body {
    height: 100%;
}

#container {
    display: flex;
    width: 100%;
}

#code {
    border-color: black;
    width: 0px;
}

<!DOCTYPE html>
<html lang="en">  
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href = "style.css">
  <title>Document</title>
</head>
<body>
  <div id = "container">
    <input type = "text" id = "code" disabled>
  </div>
  <script>
    document.getElementById("code").value = "AC-8D-9A-7E";
  </script>
</body>
</html>

所以,我该怎么办 检索粗糙宽度 的 文本框 是这样的

编辑:我不需要考虑像粘贴或删除其他帖子中提到的事件这样的情况,对我来说只是作为一个显示的目的

2 回复 | 直到 4 年前

sagar1025 4 年前

你可以用 ch 单位。 1ch 大约等于1个字符的宽度。因为您知道输入值的长度将是11个字符,所以可以将其宽度设置为 11ch

因此,当您从服务器获得响应时,可以将宽度设置为 第11章 . 虽然你能做到 12ch 并使其看起来稍微好一点(或者您可以在输入中添加填充)

#code {
    width: 11ch;
}

question 和 em . 一些你可能需要考虑的事情。

huzzzus 4 年前

<input type="text" size="11" id="code" disabled />

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

4 月前

Mass · 如何在Tailwind CSS v4中创建配置

4 月前

magenta placenta · 将css变量合并为一个变量

4 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

4 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

4 月前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

4 月前

Luckkks · 过渡色工作不正常

4 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

4 月前