如何设置html的input框的高度和宽

标签和输入的默认宽度为 1 0px。
在 Sublime Text 2 中创建新的 HTML。

添加标签和输入。
预览显示默认宽度。

更改宽度属性。
宽度会更窄。
例如,宽度=“2 0px”。

为了更复杂,请使用样式。
样式=“宽度:2 0像素;高度:3 0像素”。

预览看看效果。
宽度和高度已更改。

HTML输入框中显示长占位符文本的技巧与实现

说白了,要在 HTML 输入框中完整显示长占位符文本,技巧就是通过 JavaScript 动态调整输入元素的 size 属性。
其实很简单,因为默认情况下输入框的宽度是固定的,不会根据占位符的长度自动扩展。

我们先来说说最重要的事情。
您必须计算占位符文本的长度,然后设置输入的大小属性。
例如,在我们去年开展的一个项目中,占位符文本的长度约为 3 000 个字符。
我们通过JavaScript动态计算并设置size属性,效果非常好。

一开始我以为输入框的宽度会通过增加占位符文本的长度来自动扩展,但后来发现这是错误的,静态属性无效。
因此,我们需要在 DOM 加载后运行脚本,例如使用 DOMContentLoaded 事件。
这样,我们就可以确保元素的加载没有错误。

还有一点,您需要检查 input 元素是否存在并且包含 placeholder 属性。
如果满足这些条件,您可以通过 placeholder.length 获取文本字符数并动态设置大小属性。

还有一个很关键的细节,就是要注意CSS样式冲突。
例如,如果您的输入设置为固定宽度,则必须将其设置为 width:auto 或 min-width ,否则 size 属性可能会无效。

说实话,这是一个骗局。
很多人不注意这一点。
我认为值得尝试的一种方法是平衡快速信息的长度与界面的简单性,并在必要时使用替代的交互方法,例如使用 <textarea> 来处理多行的长文本请求。

最后提醒一下,遵循辅助功能规范非常重要。
占位符仅用于辅助请求。
必须将