如何在输入中显示光标焦点(垂直线)

Question

我有一个类型为数字的输入，我应该将输入的值格式化为返回字符串的特定格式，因此作为解决方案，我添加了字符串类型的第二个输入并隐藏了输入[type=number]，但用户只看到输入[类型=字符串]，但在第一个(数字类型(中输入值

<input type="number" [(ngModel)]="price" (ngModelChange)="formatPrice()" class="hide-number-input" required>
<input type="text" [(ngModel)]="priceValue" class="show-text-input">

所以在我的函数formatPrice()中，我将格式化的价格设置为 priceValue .在我的css文件中，我声明：

.hide-number-input {
  opacity: 0;
  z-index: 2;
  position: absolute;
}
.show-text-input {
  opacity: 1;
  z-index: 1;
  position: relative
}

它工作正常，但问题是我的光标没有显示，所以没有关注我的input[type=string]，输入中没有显示垂直线，虽然我可以写

这个想法是隐藏类型编号的输入，不应该被看到，所以我知道我的光标在隐藏的输入中，这很好，但我也必须在字符串类型的输入中显示它

Answer 1

您只需要删除position:absolute;即可显示垂直光标

.hide-number-input {
  opacity: 0;
  z-index: 2;
}
.show-text-input {
  opacity: 1;
  z-index: 1;
  position: relative;
}

希望这对您有所帮助

Answer 2

您可以这样做进行自动对焦

<input id="name" type="text" #myInput />
{{ myInput.focus() }}

在这里查看 https://stackblitz.com/edit/angular-dglats

Answer 3

可能的解决方案：尝试将 .hide-number-input 的 z 索引设置为 1 或更小。这将允许用户选择可见的输入。

.hide-number-input {
    opacity: 0;
    z-index: 1;
    }
    .show-text-input {
    opacity: 1;
    z-index: 1;
    position: relative;
    }

解释：在类 .hide-number-input 中，您已将 z 索引设置为 2。在 .show-text-input 类中，您已将 z-index 设置为 1。这意味着，即使类 .hide-number-input 的不透明度为 0(并且看不到(，它的 z 索引也高于 .show-text-input(z-index 1(。因此，无法选择具有 .show-text-input 类的输入。它被放置在"隐藏"的后面。

当您尝试单击可见的输入字段时，您实际上是在单击隐藏的输入字段，并且隐藏的输入字段

具有焦点(垂直线(，但是由于输入字段是隐藏的，因此您看不到这一点。