input type="number"上的箭头无法工作

Question

我使用了一个简单的html。

<input type="number">

它显示了一个带有向上和向下箭头的文本框，但箭头无效。可以使用键盘和鼠标滚轮上的箭头递增/递减值，但单击任何箭头时，似乎都会单击向下箭头，并且框中的值保持不变。请建议我应该做什么！

- Surya Purohit

---

在任何浏览器上都能运行，目前我正在使用Google Chrome。 - Surya Purohit

分享你的代码。它在我的电脑上可以在任何浏览器上运行。 - Madan Bhandari

@MillerMedia 我已经检查过了，但是没有重叠的内容 :(. 很抱歉无法分享 fiddle。因为这只是一个特定的情况，否则它是可以工作的。让我看看是否可以制作出适当的 fiddle，以使输入类型无法工作。 - Surya Purohit

肯定是一个冲突的JS，但它无法识别。 - Surya Purohit

你已经移除了正在加载的JS文件吗？ - MillerMedia

Answer 1

我很惊讶，但这似乎是一个错误，至少在Chrome中是如此。(Edge根本不显示箭头，而Firefox行为正确。)

如果存在e.preventDefault()，mousemove事件侦听器(在元素或文档上)会破坏INPUT TYPE="number"：

<input type="number" value="1"/>

$(function() {
    $(document).on('mousemove', function (e) {
        e.preventDefault();
    });
});

请查看https://jsfiddle.net/MCAU/Lpojfrm2/

有人能确认这个吗？

- MSC

---

哦！有趣的是，如果你将 'mousemove' 改为 'mouseup'，Chrome 会快速增加/减少数字。请参见 https://jsfiddle.net/MCAU/2w3do8d9/1/。 - MSC

确认，Chrome输入数字似乎依赖于onmousemove返回true。 - shoosh

不错的侦查工作。我可以确认这在2019年仍然是如此。 - Jamie G

Answer 2

你可以尝试这样做：

HTML

<div id="incdec">
<input type="text" value="0" />
<img src="up_arrow.jpeg" id="up" />
<img src="down_arrow.jpeg" id="down" />
</div>

JQuery

$(document).ready(function(){
$("#up").on('click',function(){
    $("#incdec input").val(parseInt($("#incdec input").val())+1);
});

$("#down").on('click',function(){
    $("#incdec input").val(parseInt($("#incdec input").val())-1);
});

});

- Jibin Balachandran

---

抱歉，我无法尝试这个。我需要使用那些箭头。 - Surya Purohit

Answer 3

经过尝试删除JS、CSS等，发现"ember-view"类造成了问题。我正在使用Ember，在其中使用input type="number"的div具有"class ember-view"。删除该类使文本框正常工作：）。谢谢。 之前的情况：

<div class="ember-view">
<input type="number">
</div>

现在

<div>
<input type="number">
</div>

- Surya Purohit

Answer 4

试试这个：

<input type="number" step="1" >

在步骤选项中，输入您要增加或减少到该值的值。例如，如果您设置step=0.5并且您的值为5，则单击向上箭头将使值更改为5.5。

我希望这对您有所帮助。

- Jibin Balachandran

Answer 5

试一下。 输入框需要聚焦才能增加/减少值。

<input type="number" autofocus="autofocus">

- Shailesh Katarmal

---

谢谢，但是当我们点击文本框时，我们可以获得焦点，此外箭头始终可点击。谢谢。 - Surya Purohit

Answer 6

对我来说，在桌面版Chrome上显示箭头，但我尝试了很多方法来恢复移动浏览器（如移动版Chrome）中的箭头，但都没有成功。

最终，我决定在输入框两侧添加一些漂亮的按钮。我编写了代码，只要您遵守ID编号规则，就可以添加任意数量的按钮。我邀请您查看我在另一篇类似帖子中发布的片段。

https://dev59.com/RsDqa4cB1Zd3GeqPaUxv#68679616

- Pietro