增加屏幕上显示的数值答案

【问题标题】：Increase Number Value Displayed on Screen增加屏幕上显示的数值
【发布时间】：2011-12-07 01:49:08
【问题描述】：

我需要在网页上显示一个数字，当按下向上或向下箭头键时该数字会增加或减少。我找到/按摩了一起 javascript 文件来执行此操作，但我似乎无法让它与我的 HTML 一起使用。我试图将它链接到一个 html 文本框，但它不起作用。

如果有人可以帮助我使用 HTML 来完成这项工作，那就太好了。

var setTimeoutId; 
var keyIs = "up"; 

 function myIncrementFunction()
{
        var num = parseFloat(myText.value)+1;
        myText.value = num; 

}

myText.onkeydown = function(e)
{
keyIs = "down";

if(keyIs == "down")
    {
        var e = e || event ;
        if (e.keyCode == 38)
            {    
                for(var s=0; s<1; s++)
                    setTimeoutId = setTimeout('myIncrementFunction()',100); 
            }
    }
}

myText.onkeyup = function(e)
{ 
 keyIs = "up"; 
}

试过了还是不行.. > ?

数字.html

<html>
<head>
<script type="text/javascript" src="number.js"></script>
</head>

<body>

<input type="text" id="myText" />

</body>

</html>

number.js

var myText = document.getElementById("myText");

// Capture keyDown events
myText.onkeydown = function(e) {
// "38" is the up arrow key
if (e.keyCode == 38) {
    // increment the value in the text input
    myText.value++;
// "40" is the down arrow key
} else if (e.keyCode == 40) {
    // decrement the value in the text input
    myText.value--;
}
}

我不明白为什么它在发布的示例中有效，当我保存文件并在浏览器中打开它时它不起作用！

我在 OSX Lion 上使用 Chrome/Safari

【问题讨论】：

您也可以发布您的 HTML 吗？此外，“我似乎无法让它与我的 HTML 一起工作”有点含糊。您是否收到任何错误消息？运行代码时究竟会发生什么？
您似乎没有在 Javascript 中定义“myText”实际上是什么。
没有错误消息，它什么也不做。我有一个名为“myText”的简单文本字段，我知道这有点模糊我根据一个论坛帖子将它放在一起，该帖子也缺少 HTML，所有海报都说他有一个文本字段，你可以使用这个脚本来增加它。

标签： javascript html numbers increment

【解决方案1】：

有一个小的 jQuery 插件可以做到这一点：https://github.com/nakupanda/number-updown

用法：

$('#textInput').updown();

在此处查看现场演示：http://jsfiddle.net/XCtaH/embedded/result/

支持键盘和鼠标滚轮事件

【讨论】：

【解决方案2】：

在您的number.js中，您正在增加文本字段的值，但您最初没有设置值，因此没有什么可以增加。

尝试编辑您的 HTML 以便您拥有：

<input type="text" id="myText" value="" />

【讨论】：

【解决方案3】：

看起来有几件事正在发生。首先，正如jayp 在他的评论中指出的那样，您并没有定义myText 是什么。

其次，我认为你有点过于复杂了。试试这样的方法怎么样：

给你的文本输入一个ID，比如<input type="text" id="myText" />

然后使用这样的东西：

// Assign our text input to a variable
var myText = document.getElementById("myText");

// Capture keyDown events
myText.onkeydown = function(e) {
    // "38" is the up arrow key
    if (e.keyCode == 38) {
        // increment the value in the text input
        myText.value++;
    // "40" is the down arrow key
    } else if (e.keyCode == 40) {
        // decrement the value in the text input
        myText.value--;
    }
}

这是一个非常简化的示例，但应该可以让您指出正确的方向。希望对您有所帮助。

See a working example at JSFiddle

编辑：

在您的情况下它不起作用，因为脚本试图在页面完全加载之前找到 input 元素。您可以像这样将脚本移动到页面底部：

<html>
    <head></head>
    <body>
        <input type="text" id="myText" />
        <script type="text/javascript" src="number.js"></script>
    </body>
</html>

【讨论】：

我快疯了！！！它在您发布的 JSFiddle 示例中工作得非常好，但是当我制作自己的文件时它就不起作用了！
那行得通。谢谢。现在我想摆脱闪烁的插入符号..是否可以使用输入字段以外的其他东西来完成这项工作？
@KenrikMarch：如果您发现我的回答有帮助，您应该通过单击答案左侧的向上箭头来投票。如果它解决了您的问题，您应该通过单击它左侧的复选标记将其标记为“已接受”。
@KenrikMarch：回答你的问题，是的，这当然是可能的。不过，您必须修改 keydown 事件的处理方式。
这里是一个使用div:jsfiddle.net/RaVGB 的简单示例，请务必在“结果”框内单击，然后使用向上和向下箭头