Javascript 如何防止输入类型="；日期“；在铬合金中来回移动

我有一支带有以下代码的笔，它会显示一个文本字段，当我点击它时，它会将类型设置为

date

<div class="x">
  <input id="i" 
         type="text"
         placeholder="which does not appear on date input"
         onfocus="f()" 
         onblur="b()"/>
</div>

问题在于Chrome会改变控件的大小。在Firefox上没有问题。我将背景设置为红色和大背景，因此变化更明显。

简单

将输入的高度设置为20px（或您需要的高度），并添加框大小：边框框

.x {
  background-color: red;
  padding: 50px;
  input {
    min-width: 200px;
    max-width: 200px;
    min-height: 20px;
  }
}

const f = () => {
  (document.getElementById("i") as HTMLInputElement).type="date";
  (document.getElementById("i") as HTMLInputElement).focus();
};

const b = () => {
   (document.getElementById("i") as HTMLInputElement).type="text";
 
};