html 中的填字游戏

Question

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

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

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

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';
                }
            }
        }
    }
}

我还想让焦点在上一个输入达到其最大长度值后自动转到下一个输入？这可能吗？

Answer 1

就大写锁定测试而言，您可以说

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

html 中的填字游戏

Crosswords puzzle in html

html

javascript

css

crossword