Question

我有2个输入滑块和一个数字输入，两者都通过JavaScript相互同步。我的数字输入框是灰色的，当我单击它时，它是紫色的。我没有任何轮廓，问题是，当我更改滑块时，输入的数字也会更新，但是有一个橙色的轮廓。我只有在chrome的Firefox中才遇到这个问题，看起来很完美。

let range = document.querySelector(
  "input[type=range]"
);
let number = document.querySelector(
  "input[type=number]"
);
range.addEventListener("input", (e) => {
  number.value = e.target.value;
});
number.addEventListener("input", (e) => {
  range.value = e.target.value;
});

:root {
 --first-color: #ffffff;
 --second-color: #5e17a2;
 --third-color: #707070;
 --fourth-color: #cccccc;
}
.number {
  -moz-appearance: textfield;
  width: 30px;
  height: 15px;
  border: 2px solid var(--fourth-color);
  border-radius: 3px;
  text-align: center;
  outline: 0;
  cursor: text;
  color: var(--third-color);
  font-weight: 600;
}

.number:focus {
  border: 2px solid var(--second-color);
}

input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

<div class="pvi flex">
  <input type="range" min="0.25" max="5" value="1" step="0.25" class="slider">
  <input type="number" value="1" class="number" placeholder="1,0" min="0">

</div>

Answer 1

设置数字输入的阶跃以匹配范围输入。默认步骤值为1，因此Firefox突出显示了它似乎无效的事实。

let range = document.querySelector(
  "input[type=range]"
);
let number = document.querySelector(
  "input[type=number]"
);
range.addEventListener("input", (e) => {
  number.value = e.target.value;
});
number.addEventListener("input", (e) => {
  range.value = e.target.value;
});

.number {
  -moz-appearance: textfield;
  width: 30px;
  height: 15px;
  border: 2px solid var(--fourth-color);
  border-radius: 3px;
  text-align: center;
  outline: 0;
  cursor: text;
  color: var(--third-color);
  font-weight: 600;
}

.number:focus {
  border: 2px solid var(--second-color);
}

input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

<div class="pvi flex">
  <input type="range" min="0.25" max="5" value="1" step="0.25" class="slider">
  <input type="number" value="1" class="number" step="0.25" placeholder="1,0" min="0">

</div>

Firefox输入橙色轮廓

1 个答案: