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索引，并在占位符前面进行输入

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

.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;
}