javascript - 在 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> $51
  <input id="price" type="range" min="51" max="360" value="" />$360
</div>
<input type="text" name="test" value="" id="test" />

slider 在 mozilla 中滑动不流畅，但在 chrome 中工作正常

Answer 1

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

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>
    $51<input id="price" type="range" min="51" max="360" value="" />$360
</div>
<input type="text" name="test" value="" id="test"/>

在单击 slider 时暂停后使用setTimeout 将焦点放在输入字段上