当前位置: 首页 > 面试题库 >

调整输入字段的宽度为其输入

傅翰池
2023-03-14
问题内容









这是我的代码,无法正常工作。HTML,JavaScript,PHP或CSS是否有其他方法来设置最小宽度?

我希望文本输入字段的宽度可以动态变化,以便输入字段可以围绕其内容流动。每个输入都有的内置填充2em,这是问题,第二个问题是min-width根本无法处理输入。

如果我设置的宽度超出了整个程序的混乱,那么我需要的宽度是1px,仅在需要时才需要。


问题答案:

听起来您的期望是,根据文本框的内容将样式动态地应用于文本框的宽度。如果是这样,您将需要一些js以在文本框内容更改时运行,如下所示:

<input id="txt" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';">

注意:此解决方案仅在每个字符都非常8px宽时才有效。



 类似资料:
  • 我试图调整反应日期选择器输入框的宽度,但令人惊讶的是,我发现几乎没有信息,无法影响其宽度。我只想使输入宽度100%包含div。 宽度应扩展到其父容器的宽度。 以下操作将导致与父的宽度相同,但宽度保持不变。 最接近的尝试是这样的,但是它也会影响弹出窗口的宽度,导致它延伸到整个屏幕的长度之外,所以这也不是一个解决方案: 日期选择器保持相同的长度,除非为宽度设置了特定的px值。 有人知道如何将react

  • 问题内容: 再次更新: 我通过选择最上面的答案来结束这个问题,以防止人们在没有真正理解问题的情况下添加答案。实际上,如果不使用网格或添加额外的CSS,就无法通过内置功能来实现。例如,如果您要处理的元素需要超出简短的输入,但它们是“内置”的,则网格将无法很好地工作。如果这是一个问题,我建议使用额外的CSS类,你可以在BS3讨论找到这里。现在BS4已经发布,可以使用包含的大小调整样式来进行管理,因此不

  • 问题内容: 要么 哪个是最佳的跨浏览器代码? 当然,这取决于要求,但是我很好奇知道人们是如何决定的以及基于什么基础。 问题答案: 您可以同时使用。css样式将覆盖支持CSS的浏览器中的属性,并使该字段具有正确的宽度,而对于不支持该样式的字段,它将退回到指定的字符数。 编辑: 我应该提到属性不是精确的大小调整方法:根据HTML规范,它_应该_引用输入将能够立即显示的当前字体的字符数。 但是,除非指定

  • 问题内容: 在表单上,​​我有一个select和两个输入字段。这些元素垂直对齐。不幸的是,我无法获得这些元素相等的宽度。 这是我的代码: 对于上面的示例,select元素的最佳宽度是198或199 px(当然我尝试了193 px,但差异很大)。我认为,这取决于分辨率,取决于各种计算机和浏览器,因为这些元素的宽度不相等(有时我认为差异约为1或2像素)。我试图在div或表行中设置这些元素,但这无济于事

  • 我有疑问,请告诉我如何进行。下面的图片,你可以看到有两个领域称为销售价格和购买价格,我想在那里只输入这些领域的十进制值请告诉我如何做到这一点 在此处输入图像描述 谢谢你

  • 问题内容: 我有以下html5输入元素: 为什么此输入允许在输入字段中输入字符“ e”?没有其他字母字符可以输入(按预期方式) 使用chrome v.44.0.2403.107 问题答案: 因为这正是规范所说的应该工作的方式。输入的数字可以接受浮点数,包括负号和或字符(其中指数是或后面的数字): 浮点数按以下顺序由以下部分组成: 可选地,第一个字符可以是“ ”字符。 “ ” 范围内的一个或多个字符