javascript - 向 <textarea> 添加伪元素

Question

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

我创建了一个小型联系表和所有 <input type="text">标签按应有的方式显示，但我在使用 <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 )