0 
<html>
<body>
<script type="text/javascript">
    var key = [["q","w","e","r","t","y","u","i","o","p"], ["a","s","d","f","g","h","j","k","l"], ["z","x","c","v","b","n","m"]];
</script>
<table>
    <tr>
       <td><input type = 'button' value = "key[0][1]" /></td>;
    </tr>
</table>
</body>
</html>

这是上面的一个小例子，但我基本上是在制作一个屏幕键盘，我已经有了定位按钮的循环，但是在我的循环中，我尝试分配每个键的值，类似于上面的代码，而不是打印qwerty 为每个键，它为每个按钮打印 key[row][col]。如何使用与上述类似的方法让字母出现在按钮上？

4

3 回答 3

3

以下代码生成您期望的键盘布局：

<html>
<head>
<script type="text/javascript">
var key = [["q","w","e","r","t","y","u","i","o","p"], ["a","s","d","f","g","h","j","k","l"], ["z","x","c","v","b","n","m"]];
</script>

<body>
<script type="text/javascript">
for(var i = 0; i < key.length; i++)
{
    document.write("<div>");
    for(var j = 0; j < key[i].length; j++)
    {
       document.write("<input type='button' value='" + key[i][j] + "'/>");
    }
    document.write("</div>");
}
</script>
</body>
</html>

在此处输入图像描述

第二行和第三行唯一应该向右移动一点看起来像真正的键盘。为此，我们可以对 div 标签进行填充。希望这对您有所帮助。

于 2013-11-19T00:46:53.880 回答
1

像这样的东西？

HTML：

<input id="myInput" type="button" />

JavaScript：

var key = [["q","w","e","r","t","y","u","i","o","p"], ["a","s","d","f","g","h","j","k","l"], ["z","x","c","v","b","n","m"]];

var input = document.getElementById('myInput');
input.value = key[0][1];

这是基本的想法。您已经有一个循环可以使用。javascript 应该在页面上的 HTML之后。您的元素需要先存在，然后才能抓取它们。不过，不确定这是否是您的确切困惑。

您可以使用 javascript 创建元素，但除非有理由这样做，否则您最好编写 HTML。如果您使用 javascript 函数来生成元素并填写它们的值，您将需要 javascript 的document.createElement：

var keysArr = [["q","w","e","r","t","y","u","i","o","p"], ["a","s","d","f","g","h","j","k","l"], ["z","x","c","v","b","n","m"]];

var generateKeys = function(keys) {

  for (var i = 0 ; i < keys.length ; i++) {

    for (var j = 0 ; j < keys[i].length ; j++) {

      var input = document.createElement('input');
      input.value = key[i][j];
      document.appendChild(input); // or put it wherever you need to.

    }
  }
}

generateKeys(keysArr);

将它包装在一个函数中还可以让您重新使用具有不同键盘布局的代码，例如，让用户动态选择不同的布局。

于 2013-11-19T00:45:12.480 回答
0

您将需要以编程方式设置它们，而不是在 value 属性中。

您还需要以编程方式在循环中创建 tr/td/input 元素，例如：

http://www.dustindiaz.com/add-and-remove-html-elements-dynamically-with-javascript/

当您以编程方式创建输入标签时，您可以使用 javascript 设置 value 属性 - 例如。

newInput.setAttribute("value", key[rowIndex, cellindex]);
于 2013-11-19T00:41:17.837 回答