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>

ここに画像の説明を入力

2 列目と 3 列目が本物のキーボードのように見えるように少しだけ右に移動する必要があります。このために、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 を使用して値属性を設定できます。

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