简单的方式来改变输入字段的视觉顺序动态(不改变表单HTML)

Easy way to change visual order of input fields dynamically (without changing form HTML)?

本文关键字：改变 表单 HTML 动态 视觉 方式 输入 字段 简单 顺序      更新时间：2023-09-26

我有一个特定的表单，作为angular指令模板。它按一定顺序包含几个INPUT字段。我不能使用ng-repeat方法动态构建该表单，因为有些字段具有自定义行为、特殊验证器等。

 <div ID="1"> input field 1</div>
 ...
 <div ID="7"> input field 7</div>
然而，在某些用例下，我需要以不同的随机顺序显示这些输入。表单的逻辑和内容保持不变，但只有一个输入，以前是第7应该成为第1。如果我能使用一个CSS类来有条件地应用于某些元素(可能是使用ng-class选项)，那就太好了。

我可以使用什么CSS来保持相同的模板(上面的草图)，但视觉上"div id=7"出现在"div id=1"之前?

我更喜欢避免DOM操作，并以角友好的方式使用它。

flexbox可以使用order属性改变元素的视觉顺序。

.wrap {
  display: flex;
  flex-direction: column;
}
.wrap div {
  padding: 1em;
  border: 1px solid black;
  margin-bottom: 1em;
}
#first {
  background: #bada55;
  font-weight: bold;
  order: 7
}
#last {
  background: #663399;
  color: white;
  font-weight: bold;
  order: 1
}
<div class="wrap">
  <div ID="first">I'm first in the source order but not visually</div>
  <div ID="last">I'm last in the source order but visually I'm first</div>
</div>

之后，可以通过Javascript添加随机性和循环分配顺序(我假设，我的JS fu基本上是不存在的)。

由于div元素是块元素，因此每个div将显示在其行上，因此仅通过CSS不可能在第一个之前显示第二个div。

但是如果你把这个div样式设置为display:inline;或display:inline-block;，例如宽度，那么你就可以使用float:right; float:left;来改变顺序。

我还谷歌了"通过css改变html元素的顺序"，它也给了我一些其他的想法。

在stackoverflow上也有一些答案比如这个

相关文章：