Question

好的我有这个向上/向下数字输入框：

标记：

git checkout master -- <file>

使用Javascript：

<div class="rotatortextbox">
    <asp:TextBox ID="txtrunningtimeforfirstlot" ClientIDMode="Static" runat="server">0</asp:TextBox>
    In mins)
</div>
<div class="rotatorarrow">
    <input id="UpButton" value="&#9650;" type="button" onmousedown="timerID = setInterval(function(){FactUp()},100);" onmouseup="clearInterval(timerID);" />
    <input id="DownButton" value="&#9660;" type="button" onmousedown="timerID = setInterval(function(){FactDown()},100);" onmouseup="clearInterval(timerID);" />
</div>

这完全没问题。但是如何在Jquery中进行这样做，以便我不需要为每个这样的文本框创建单独的var timerID = 0; function FactDown() { var obj = document.getElementById("<%=txtrunningtimeforfirstlot.ClientID%>"); var num = parseInt(obj.value) if (isNaN(num)) { return; } num -= 1; obj.value = num; } function FactUp() { var obj = document.getElementById("<%=txtrunningtimeforfirstlot.ClientID%>"); var num = parseInt(obj.value); if (isNaN(num)) { return; } num += 1; obj.value = num; } / FactUp函数？

我希望找到一种使用Jquery的.closest方法来实现它的方法。这样我就不必一次又一次地指定文本框的#id。

Answer 1

使用.Net framewotk 4.5及以上版本，只需使用TextMode="Number"作为文本框的属性即可。这将自动增加键上/下的减少。

<asp:TextBox ID="txtrunningtimeforfirstlot" ClientIDMode="Static" runat="server" TextMode="Number">0</asp:TextBox>

Answer 2

代码如下：此代码仅供您参考，它将演示如何在不创建任何功能的情况下更改文本框的值。

<input type="text" ID="txtrunningtimeforfirstlot" value="0" />

<input id="UpButton" value="&#9650;" type="button" onclick="alert($('#txtrunningtimeforfirstlot').val());$('#txtrunningtimeforfirstlot').val(parseInt($('#txtrunningtimeforfirstlot').val())+1)" />

Answer 3

使用Vanilla JS，你可以做到这一点。

var timerID = 0;
function NewFactFunction(action) {
    var obj = document.getElementById("<%=txtrunningtimeforfirstlot.ClientID%>");
    var num = parseInt(obj.value)

    if (isNaN(num)) {
        return;
    }
    if(action === "up"){
        num +=1
    }
    else{
    num -= 1;
    }
    obj.value = num;
}

然后点击向上和向下按钮的事件将分别为"timerID = setInterval(function(){NewFactFunction("up")},100);"和"timerID = setInterval(function(){NewFactFunction("down")},100);"。

Answer 4

我自己找到了答案，所以我在这里发帖子：

<强> Jquery的：

 var intervalId;
 $(".up").mousedown(function() {
   var box = $(this).closest('div').find('.Rbox');
   intervalId = setInterval(
     function() {

       $(box).val(parseInt($(box).val()) + 1);
     }, 100);
 }).mouseup(function() {
   clearInterval(intervalId);
 });


 $(".down").mousedown(function() {
   var box = $(this).closest('div').find('.Rbox');
   intervalId = setInterval(
     function() {

       $(box).val(parseInt($(box).val()) - 1);
     }, 100);
 }).mouseup(function() {
   clearInterval(intervalId);
 });

.up,
.down {
  font-size: 6px;
  display: block;
  height: 10px;
}
  .rotator  span {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="rotator">
  <span><input type="text" class='Rbox' value="0" /></span>
  <span><input class='up' value="&#9650;" type="button" />
    <input  class='down' value="&#9660;" type="button" /></span>
</div>

如何使用Jquery制作这个javascript Up / Down数字输入框？

4 个答案: