Question

我需要在网页上显示一个数字，当按下向上或向下箭头键时，该数字会增加或减少。我发现/按摩一起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"; 
}

试过这个，它仍然无法正常工作。＆gt; ？

number.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

Answer 1

看起来有一些事情正在发生。首先，正如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>

Answer 2

在您的number.js中，您正在增加文本字段的值，但您没有最初设置的值，因此无需增加任何内容。

尝试编辑HTML，以便：

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

Answer 3

有一个小的jQuery插件可以执行此操作：https://github.com/nakupanda/number-updown

用途：

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

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

支持键盘和鼠标滚轮事件

增加屏幕上显示的数值

3 个答案: