1. 首页
  2. css

CSS自动增长输入和文本区域

默认情况下,<input><textarea>元素不会根据其包含的内容更改大小。事实上,没有任何简单的HTML或CSS方法可以让他们这么做。有点可笑,因为这似乎是一个合理的用例。当然,有办法,我的朋友。总有办法的。

在雷米·夏普最近在博客中以内联<input>元素的形式对此进行了讨论之后,我开始思考这个问题。

非输入元素自然扩展

我觉得奇怪的是,没有办法强迫输入元素模仿这种行为,但唉。

我们可以使任何元素可编辑并像contenteditable属性那样输入:

<spanclass=>

That <span>将自然增长到它所包含内容所需的宽度。如果它是一个<div>或任何其他块级元素,它也会根据需要垂直扩展。

但是是否可以访问非输入元素?我不太确定。注意,我在元素上放置了>。这只是基于一些文件的最好猜测。

即使这很有帮助……

  1. 用回车键可以提交表单这一事实如何?
  2. 表单数据通常是序列化并发送的,而执行此操作的代码可能没有寻找范围,这种想法如何?
  3. 它实际上与屏幕阅读器中的输入读取相同吗?
  4. 输入自然会做哪些我没有想到的事情?正如我对使用非输入元素可以从浏览器中免费获得自动调整大小的想法所吸引一样,我也有点担心(我的)未知的可用性和可访问性风险。即使不是很自然,我们能让他们调整尺寸吗?

    我的一个想法是将输入包装在一个相对的内联父级中,并绝对地将其放置在内部。然后,使用JavaScript,我们可以将输入值与包装器内的隐藏跨距同步,根据需要将宽度加宽。

    对于textareas,一种经典的技术是计算换行数,使用它设置高度,然后将其乘以行高。这对于预先格式化的文本(如代码)非常有效,但对于长格式的段落(如内容)则完全无效。

    以下是所有这些想法的组合。

    CodePen嵌入回退

    其他想法

    Shaw有一个小JavaScript一行,非常聪明。JavaScript在元素上设置一个等于输入值的data-*属性。输入是在CSS网格中设置的,该网格是一个伪元素,使用data-*属性作为其内容。该内容是根据输入值将网格拉伸到适当大小的内容。

    CodePen Embed Fallback

    您的想法

    我绝对知道,各位网络书呆子已经解决了这六个问题。让我们看看评论里的em。

    1. 埃里克·贝利给我打了个电话,脑子里想了想:(1)没有一个好名字。(2) 用语音控制可能不行。(3) 在高对比度模式下会被忽略。

CSS自动增长输入和文本区域 为WP2原创文章,链接:https://www.wp2.cn/css/css%e8%87%aa%e5%8a%a8%e5%a2%9e%e9%95%bf%e8%be%93%e5%85%a5%e5%92%8c%e6%96%87%e6%9c%ac%e5%8c%ba%e5%9f%9f/

发表评论

您的电子邮箱地址不会被公开。