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" />

滑块在mozilla中无法顺畅滑动，但在Chrome中工作正常

Answer 1

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

＆＃13;

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);

＆＃13;

#result {
    font-size: 2em;
}

＆＃13;

<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"/>

＆＃13;

单击滑块时暂停后，使用setTimeout关注输入字段

Answer 2

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

输入类型范围与firefox中的焦点方法无法进行调用

2 个答案: