Question

如何在教育形式中动态使用文本区域形式的技能？

我希望当用户在文本区域中输入他/她的技能时，然后当他们按下Tab键时，技能会自动着色并专注于下一个技能。是否有任何bootstrap或jQuery插件？

<div class="form-group">
    <textarea rows="3" cols="70" class="form-control" id="skills" name="skills" placeholder="Professional Skills" ></textarea>
</div>

Answer 1

假设您正在讨论每项技能的单独textareas，以下内容应该有效。单个文本区域中的所有文本必须是相同的颜色。如果要在用户删除文本时切换回黑色，或者如果他们使用shift-tab等，则需要更多逻辑。

$(".skill-area").on("blur", function(event) {
  var $area = $("#" + event.target.id);
  if (event.target.value.length > 0 && !$area.hasClass("entered")) {
    $area.addClass("entered");
  }
});

.entered {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <body>
    <div class="form-group">
      <textarea rows="3" cols="70" class="form-control skill-area" id="skill1" name="skill1" placeholder="Professional Skills" ></textarea>
    </div>
    <div class="form-group">
      <textarea rows="3" cols="70" class="form-control skill-area" id="skill2" name="skill2" placeholder="Professional Skills" ></textarea>
    </div>
  </body>
</html>

如何在教育形式中动态使用技能输入表格？

1 个答案: