Ограничение ввода

@Totto · Регистрация: 15.10.2019

Author24 — интернет-сервис помощи студентам

Есть судоку, часть ячеейк заполнена автоматически (их нельзя изменять) часть нет. Там где не заполнены нам нужно написать число от 1 до 9, при попытке нажать что то еще или букву просто ничего не произойдет. На данный момент я в пустую ячейку судоку могу хоть целый роман написать.
Изначально в ячейках нет инпута:

HTML5

            <tr>
                <td id='c0'class="my-td"></td>
                <td id='c1'class="my-td"></td>
                <td id='c2'class="my-td"></td>
 
   ..............
            </tr>

Он открывается для некоторых так:

Javascript

 let tbl = document.querySelector('table');
    for(let i = 0; i < tbl.rows.length; i++){
        for(let j = 0; j < tbl.rows[i].cells.length; j++){
            if(tbl.rows[i].cells[j].innerText==0){
                tbl.rows[i].cells[j].contentEditable = "true";

Я пробовала ограничить хотя бы длину, просто по принципу:

HTML5

<tr>
<td id='c0'class="my-td"maxLength='1'></td>
<td id='c1'class="my-td"maxLength='1'></td>
<td id='c2'class="my-td"maxLength='1'></td>
</tr>

но это не работает так как у самого td в принципе нет maxlength.
Другими словами в моем случает лучше ограничить как то через JS, типо:

Javascript

1	tbl.rows[i].cells[j].maxLength='1';

но это тоже почему то не работает... нет других простых способов?

з.ы. желательно без jQuery

Добавлено через 12 минут
p.p.s. есть такой метод:

Javascript

1	document.getElementById("myTextarea").maxLength = "1";

но как я понимаю он работает только если у нас какой то инпут типо поля ввода, в моем случает когда есть только ячейки это не работает и пишет: Cannot read property 'maxLength' of null

@Mr_Sergo · 21.10.2019, 17:41

Totto,

https://codepen.io/Mr_Sergo/pe... itors=1010

Javascript

let array = [" ", 9, 3, 7, 1, 2, 8, 6, 5, 2, 5, " ", 4, " ", 8, " ", 7, 1, 8, 1, " ", 9, 5, 6, 4, 3, 2, 5, 3, 4, " ", 6, 1, 7, " ", 8, " ", 6, 9, " ", " ", 7, 2, 4, " ", 7, 2, " ", 3, 4, " ", 1, 5, 6, 6, " ", 2, 8, " ", 5, 3, 1, 9, 3, 8, 1, " ", 9, " ", " ", 2, 7, 9, 7, 5, 1, " ", 3, 6, 8, " "];
let newArr = [];
let trr = document.querySelectorAll('.my-td');
 
// заполняем таблицу
trr.forEach((e, i) => {
    if (array[i] == ' ') {
        e.contentEditable = true;
        e.classList.add('editable');
    }
    e.innerText = array[i];
});
 
// запихиваем в массив значения ячеек и выводим в консоль
document.querySelector('button').addEventListener('click',() => {
    newArr = [];
    trr.forEach((e, i) => newArr.push(e.innerText));
    console.log(newArr);
});
 
let editable = document.querySelectorAll('td[contenteditable="true"]');
 
editable.forEach(e => {
    e.oninput = function() {
        this.innerText = this.innerText.replace(/[^\d]/, '').substring(0, 1);  // ограничиваем длину и разрешаем только цифры
    }
});

строка 25

	21.10.2019, 17:41

Ограничение ввода

Решение