用可编辑的输入替换静态HTML元素

Question

用可编辑的输入（保持<span>的值）无缝替换静态span元素的（css？）技巧是什么，从而没有视觉故障-即输入值是否与span textContent完全对齐？

<input type="number" [ngModel]="myvalue" *ngIf="editMode; else static">{{value}}</span>
<ng-template #static>
  <span>{{myvalue}}</span> km
</ng-template>

我想到了：

1. 实际上总是渲染输入，只是没有边框，但是问题出在输入的旋转器箭头上-似乎没有任何跨浏览器的方式隐藏旋转器（当未处于editMode时），我需要，并避免轻推相邻的文本。

2. contenteditable-这样对移动设备安全吗？

根据您的经验，您会采取哪种做法？还有其他想法吗？