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

Question

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

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

希望对你有所帮助