将伪元素添加到<textarea> </textarea>

Question

我最近偶然发现了this article，我决定尝试一下。

我创建了一个小型联系表单，所有<input type="text">代码都会显示，但我在<textarea>时遇到问题。

我想要的是textarea比输入框更大，我通过添加

工作

.yoko-textarea::before{
    height:23em;
}}

问题在于，当您在其中键入内容并单击其他位置时，该框会消失。我希望它保持可见，例如input type="text">标签。

Here's what I have so far

由于我只添加了相关代码，因此格式被破坏了。您可以在底部找到<textarea>。

如果有人可以帮我解决这个问题，我会很感激。

Answer 1

问题在于您document.querySelectorAll，您只选择intput类和input__field类的所有元素。您还必须在其中包含类型textarea。

替换它：

[].slice.call( document.querySelectorAll( 'input.input__field' ) ).forEach( function( inputEl )

使用：

[].slice.call( document.querySelectorAll( 'input.input__field,textarea.input__field' ) ).forEach( function( inputEl )