textarea标签过渡效果异常：输入内容后无法保持置顶

问题根源 #

你的input标签能正常实现输入后label留在上方，是因为：

1. input加了required属性，输入内容后触发:valid伪类；
2. CSS里写了input:valid~label选择器，对应触发label的位移样式。

但textarea没做到这两点：既没加required，CSS里也没给textarea配置:valid对应的样式规则；另外你写的jQuery代码语法错误，css()方法不能直接传带冒号的字符串。

两种解决方案 #

方案1：用HTML5伪类（适合必填场景） #

如果要求用户必须填写textarea，直接用HTML5的伪类就能搞定：

1. 给textarea加上required属性，同时删掉标签里的默认空格（不然页面加载时textarea会被判定为有内容）：

<div class="input-field">
  <textarea style="min-height: 45px" required spellcheck="false"></textarea>
  <label>Your Message</label>
</div>

2. 补充CSS规则，把textarea的:valid状态也加上：

input:focus~label,
input:valid~label,
textarea:focus~label,
textarea:valid~label /* 新增这行 */
{
  top: -5px;
  left: 15px;
  font-size: 16px;
  padding: 0 2px;
  background: white;
}

方案2：JS+CSS类（适合非必填场景） #

如果允许textarea为空，就用JS检测输入内容，给有内容的textarea加个类，再用CSS控制label：

1. 先给CSS加个类选择器：

input:focus~label,
input:valid~label,
textarea:focus~label,
textarea.has-content~label /* 新增这行 */
{
  top: -5px;
  left: 15px;
  font-size: 16px;
  padding: 0 2px;
  background: white;
}

2. 写JS监听输入事件，动态添加/移除类：

// 页面加载时先检查一次
$('textarea').each(function() {
  if ($.trim($(this).val()) !== '') {
    $(this).addClass('has-content');
  }
});

// 监听输入变化
$('textarea').on('input', function() {
  if ($.trim($(this).val()) !== '') {
    $(this).addClass('has-content');
  } else {
    $(this).removeClass('has-content');
  }
});

另外你原来的测试代码可以改成正确的写法：

// jQuery css方法的正确用法
if ($.trim($("textarea").val()) != '') {
  $("textarea").css('border', '2px solid blue');
  // 或者 $("textarea").css({ border: '2px solid blue' });
}

注意事项 #

• 一定要清空textarea标签里的默认空格或换行，不然初始状态会被误判为有内容。
• 过渡动画已经在.input-field label里设置了transition: 0.3s，修复后会自动生效。

内容的提问来源于stack exchange，提问作者PredAtor