Angular 9：如何防止 iOS 键盘在窗体内从一个输入更改为另一个输入时消失

Question

在我的 Angular 应用程序中，我有这个表单模板：

<div class="row">
    <div class="col-md-4">
      <div class="form-input">
        <label>
          <input required>
          <span class="placeholder">Name</span>
          <button class="reset_input border-0 bg-transparent p-0 m-0"><i class="icon-delete"></i>
          </button>

        </label>
        <span class="error "><span class="alert-icon icon-error-severe" aria-hidden="true"></span>Caractère invalide</span>
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-input">
        <label>
          <input required>
          <span class="placeholder">Surname</span>
        </label>
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-input">
        <label>
          <input required>
          <span class="placeholder">CIN</span>
        </label>
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-input">
        <label>
          <input required>
          <span class="placeholder">Ville</span>
        </label>
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-input">
        <label>
          <input required>
          <span class="placeholder">Departement</span>
        </label>
      </div>
    </div>

  </div>

我正在应用这个 css：

.bloc_advanced_search {
  padding-top: 0.938rem;
  position: relative;
  margin-bottom: 1.875rem;
  padding-bottom: 0.938rem;
}

#search_collapse { padding-top: 1.563rem;}

#search_collapse.show {
  padding-bottom: 2.813rem;
}

.bloc_advanced_search .title_home {
  font-size: 1.875rem;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.13;
  letter-spacing: normal;
  color: #ffffff;
  padding-bottom: 0.9375rem;
  position: relative;
  width: calc(100% - 3.75rem);

}

.bloc_advanced_search .title_home::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1.875rem;
  height: 0.375rem;
  content: "";
  background: #ff7900;
}

.bloc_advanced_search .form-input {
  margin: 0 0 1.25rem;
  width: 100%;
}

.bloc_advanced_search .form-input label {
  position: relative;
  display: block;
  width: 100%;
  min-height: 2.813rem;
}

.bloc_advanced_search .form-input .placeholder {
  position: absolute;
  display: block;
  top: 1.375rem;
  z-index: 2;
  font-size: 1.125rem;
  transition: all 200ms ease-in-out;
  width: 100%;
  cursor: text;
  color: #808080;
}

.bloc_advanced_search .form-input input {
  background: #000;
  position: absolute;
  top: 0.625rem;
  z-index: 1;
  width: 100%;
  font-size: 1.125rem;
  border: 0;
  border-bottom: 1px solid #d8d8d8;
  transition: border-color 200ms ease-in-out;
  outline: none;
  padding: 0;
  margin: 0;
  color: #fff;
  padding-right: 2.813rem;
  border-radius: 0;
  box-shadow: none;
  outline: none;

}

.bloc_advanced_search .form-input input {
  height: 2.813rem;
}
.bloc_advanced_search .form-input input::-ms-clear {
  display: none;
}
.bloc_advanced_search .form-input input:focus,
.bloc_advanced_search .form-input input:valid {
  border-bottom: 2px solid #fff;
}

.bloc_advanced_search .form-input input:focus + .placeholder,
.bloc_advanced_search .form-input input:valid + .placeholder {
  top: 0;
  cursor: inherit;
  font-size: 0.75rem;
  color: #808080;
}

.bloc_advanced_search .btn-bottom {
  padding-top: 1.25rem;
}

.bloc_advanced_search .rectangle {
  width: 3.125rem;
  height: 3.125rem;;
  padding: 1.188rem 1rem;
  background-color: #ff7900;
  color: #fff;
  position: absolute;
  right: 0.938rem;
  top: 0;
}

.bloc_advanced_search .rectangle::after {
  content: "\e93f";
  font-family: icon-orange, sans-serif;
  transform: rotate(90deg);
  display: block;
  font-size: 1.25rem;
  vertical-align: top;
  margin-top: -0.313rem;
}

.bloc_advanced_search .rectangle.disabled {
  background-color: #333333;
  color: #000;
}

.bloc_advanced_search.interne .rectangle {
  top: -0.938rem;
}

.bloc_advanced_search.interne .rectangle[aria-expanded=false]::after {
  transform: rotate(-90deg);
}

.bloc_advanced_search .reset_input {
  position: absolute;
  right: 0.625rem;
  bottom: -0.188rem;
  font-size: 1.5rem;
  z-index: 2;
  color: #fff;
  line-height: normal;
}

我的问题特别是在IPAD 模式下，

当我将焦点从一个输入更改为另一个时，IOS 键盘似乎已关闭并在输入到另一个输入之间重新打开，这导致我每次都双击每个输入以使其聚焦（并且同时每个输入关闭/打开键盘时间

我的目的是，在从一个输入飞到另一个输入时保持键盘出现，并通过一个简单的点击，将焦点设置在所需的输入上并且能够书写。

当然，当在表单或输入区域之外单击时，键盘应该会消失。

有什么简单的方法可以正确地做到这一点吗？

Answer 1

我通过更改 z-index 并在占位符前面进行输入来纠正它

此外，我将输入的背景设置为透明，以使占位符也可见

.bloc_advanced_search .form-input input {
  background: transparent; /* <- THIS  */
  position: absolute;
  top: 0.625rem;
  z-index: 3;  /* <- THIS  */
  width: 100%;
  font-size: 1.125rem;
  border: 0;
  border-bottom: 1px solid #d8d8d8;
  transition: border-color 200ms ease-in-out;
  outline: none;
  padding: 0;
  margin: 0;
  color: #fff;
  padding-right: 2.813rem;
  border-radius: 0;
  box-shadow: none;
  outline: none;

}