在 Firefox 中使用焦点方法的输入类型范围不起作用

Question

在 HTML 代码中，我们使用输入类型范围，但问题是当我们使用焦点事件时，它在 Firefox 中无法正常工作。

这是我的代码

var p = document.getElementById("price"),
  res = document.getElementById("result");
test = document.getElementById("test");

p.addEventListener("input", function() {
  test.focus();
  test.value = "$" + p.value;
}, false);

#result {
  font-size: 2em;
}

<div style="margin-top: 1em">
  <h2>Price</h2> 
  <input id="price" type="range" min="51" max="360" value="" />0
</div>
<input type="text" name="test" value="" id="test" />

滑块在 mozilla 中滑动不流畅，但在 chrome

中工作正常

Answer 1

尝试更新您的 Firefox 浏览器，因为我运行您的代码和滑块运行在我这边的浏览器（Chrome 和 Firefox）和您的代码中都很流畅您没有提供对 JavaScript 代码的引用。我假设这存在于您的主要代码中。如果您在更新后仍遇到问题，请告诉我。

Answer 2

当焦点转移到输入字段时，您将无法滑动滑块。使用以下代码解决

var p = document.getElementById("price"),
    res = document.getElementById("result"),
    test=document.getElementById("test"),
    timeout = null;

p.addEventListener("input", function() 
{
   test.value = "$" + p.value;
   clearTimeout(timeout);
   timeout = setTimeout(function(){ test.focus(); }, 400);
}, false);

#result {
    font-size: 2em;
}

<div style="margin-top: 1em">
    <h2>Price</h2>
    <input id="price" type="range" min="51" max="360" value="" />0
</div>
<input type="text" name="test" value="" id="test"/>

使用 setTimeout 在单击滑块暂停后专注于输入字段

在 Firefox 中使用焦点方法的输入类型范围不起作用

input type range with focus method in firefox not woking

html

javascript

firefox

focus