颤动多行文本字段

当需要在UI上实现一些效果，比如提示用户输入有误或是引起注意时，颤动多行文本字段是一种很好的解决方案。本文将介绍如何使用CSS和JavaScript实现这个效果。

HTML结构

首先，我们需要在HTML中创建一个文本框和一个标签，用于显示错误消息。

<textarea id="text-area"></textarea>
<span id="error-msg"></span>

CSS样式

接下来，我们需要添加一些CSS样式来指定文本框和错误信息的样式。以下示例使用了flexbox布局，并将错误消息的颜色设置为红色。

#text-area {
  width: 100%;
  height: 150px;
  font-size: 16px;
  border: 1px solid #ccc;
  padding: 10px;
}

#error-msg {
  display: none;
  color: red;
  margin-top: 10px;
}

JavaScript代码

最后，我们需要编写JavaScript代码来实现文本框颤动的效果。以下示例使用了jQuery库，它可以轻松地处理CSS动画和延迟效果。当用户尝试提交表单时，会检查文本框中是否存在错误，并在错误消息下方显示错误消息。同时，文本框会颤动三次。

$("form").submit(function(e) {
  var error = false;
  if ($("#text-area").val() === "") {
    $("#error-msg").text("输入不能为空");
    error = true;
  }
  
  if (error) {
    e.preventDefault();
    $("#error-msg").show();
    $("#text-area").addClass("shake");
    setTimeout(function() {
      $("#text-area").removeClass("shake");
    }, 500);
    setTimeout(function() {
      $("#text-area").addClass("shake");
    }, 1000);
    setTimeout(function() {
      $("#text-area").removeClass("shake");
    }, 1500);
  } else {
    $("#error-msg").hide();
  }
});

结论

颤动多行文本字段是实现UI效果的一种有趣方式。使用CSS和JavaScript，可以向用户显示错误消息，并以引起注意的方式提醒他们。在编写代码时，要确保考虑到性能和可访问性，并遵循最佳实践。