Question

我想知道是否可以将样式应用于空文本区域。作为一个最小的例子，我想要一个评论框，当用户点击它时会扩展（:focus），但是当用户输入文本时会保持展开状态，但是当框为空时会重新折叠。 / p>

我已经尝试:empty，但这对输入/ textareas（仅限DOM元素）不起作用。

＆＃13;

#comments {
  width: 150px;
  height: 30px;
  font-family: sans-serif;
  border-radius: 5px;
  outline:none;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  transition: all 1s;
}

#comments:not(:empty),
#comments:focus {
  width: 250px;
  height:100px;
  border-radius: 10px;
}

＆＃13;

<textarea type="text" id="comments" placeholder="Place a comment"></textarea>

＆＃13;

当用户在其中输入内容时，有没有办法让输入保持较大？

Answer 1

根据我的情况，：空仍然是工作草案，您使用的特定浏览器可能不支持。

快速JavaScript解决方案是根据textarea是否有值来添加/删除HTML类。

.empty{/*styles go here*/}

你的JavaScript：

textareaElement.addEventListener('input',function(){
    if(this.value && this.classList.contains("empty")) this.classList.remove("empty");
    else this.classList.add("empty");
},false);

有关Element.classList的更多信息，请访问MDN。

仅将样式应用于空输入/ textarea

1 个答案: