时间戳

首页 > 解决方案 > html中的填字游戏

javascript - html中的填字游戏

问题描述

这个小拼图只接受小写字母。

请问如何让它接受大写和小写字母？

或者至少提醒用户停用大写锁定？

HTML

  <body onload="initializeScreen()">
    <table id="puzzle">
    
    </table>
    
    <input class="butt"  type="submit" value="Check" onclick="checkClicked()">

JS

//Loads the Crossword
function initializeScreen(){
    var puzzleTable = document.getElementById("puzzle");
    puzzleArrayData = preparepuzzleArray();
    for ( var i = 0; i < puzzleArrayData.length ; i++ ) {
        var row = puzzleTable.insertRow(-1);
        var rowData = puzzleArrayData[i];
        for(var j = 0 ; j < rowData.length ; j++){
            var cell = row.insertCell(-1);
            if(rowData[j] != 0){
                var txtID = String('txt' + '_' + i + '_' + j);
                cell.innerHTML = '<input type="text" class="inputBox" maxlength="1" style="text-transform: uppercase" ' + 'id="' + txtID + '" onfocus="textInputFocus(' + "'" + txtID + "'"+ ')">';
            }
        }
    }
    addHint();
}

//Returns Array
function preparepuzzleArray(){
var items = [[0, 'f', 0],
                    ['r', 'u', 'n'],
                    [0, 'n', 0],
];
return items;
}
//Check button
function checkClicked(){
    for ( var i = 0; i < puzzleArrayData.length ; i++ ) {
        var rowData = puzzleArrayData[i];
        for(var j = 0 ; j < rowData.length ; j++){
            if(rowData[j] != 0){
                var selectedInputTextElement = document.getElementById('txt' + '_' + i + '_' + j);
                if(selectedInputTextElement.value != puzzleArrayData[i][j]){
                    selectedInputTextElement.style.backgroundColor = 'pink';
                    
                }else{
                    selectedInputTextElement.style.backgroundColor = 'lightgreen';
                }
            }
        }
    }
}

一旦前一个输入达到其最大长度值，我还想让焦点自动转到下一个输入？那可能吗？

标签： javascripthtmlcsscrossword

解决方案

在测试大写锁定方面，您可以说

     const puzzle = document.getElementById('#puzzle');
    
     puzzle.addEventListener('keyup', function (event) {
      let caps = event.getModifierState('CapsLock');
       if(caps){
         alert("Please turn off caps lock etc..")
       }  
     })

推荐阅读