输入检查用户是否输入了0-9之间的值Javascript

Question

我正在实施Sudoku拼图。

我正在尝试验证用户输入的内容是0-9之间的值。

但我坚持的语法和如何解决这个问题。

<table class="spuzzle"> 
    <caption>Sudoku</caption> 
    <thead> 
    <tr> 
     <th></th> 
     <th>1</th> 
     <th>2</th> 
     <th>3</th> 
     <th>4</th> 
     <th>5</th> 
     <th>6</th> 
     <th>7</th> 
     <th>8</th> 
     <th>9</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <th>A</th> 
     <td colspan="3" rowspan="3" class="greenBox"> 
     <table class="subTable"> 
      <tr> 
      <td contentEditable="true" class="sudEnter"></td> 
      <td contentEditable="true" class="sudEnter"></td> 
      <td>4</td> 
      </tr> 
      <tr> 
      <td contentEditable="true" class="sudEnter"></td> 
      <td contentEditable="true" class="sudEnter"></td> 
      <td contentEditable="true" class="sudEnter"></td> 
      </tr> 
      <tr> 
      <td>3</td> 
      <td>5</td> 
      <td contentEditable="true" class="sudEnter"></td> 
      </tr> 
     </table> 
     </td> 
     <td colspan="3" rowspan="3" class="goldBox"> 
     <table class="subTable"> 
      <tr> 
      <td>5</td> 
      <td contentEditable="true" class="sudEnter"></td> 
      <td>3</td> 
      </tr> 
      <tr> 
      <td contentEditable="true" class="sudEnter"></td> 
      <td contentEditable="true" class="sudEnter"></td> 
      <td contentEditable="true" class="sudEnter"></td> 
      </tr> 
      <tr> 
      <td contentEditable="true" class="sudEnter"></td> 
      <td contentEditable="true" class="sudEnter"></td> 
      <td contentEditable="true" class="sudEnter"></td> 
      </tr> 
     </table> 
     </td> 
     <td colspan="3" rowspan="3" class="greenBox"> 
     <table class="subTable"> 
      <tr> 
      <td contentEditable="true" class="sudEnter"></td> 
      <td>7</td> 
      <td contentEditable="true" class="sudEnter"></td> 
      </tr> 
      <tr> 
      <td>3</td> 
      <td>1</td> 
      <td contentEditable="true" class="sudEnter"></td> 
      </tr> 
      <tr> 
      <td>2</td> 
      <td contentEditable="true" class="sudEnter"></td> 
      <td contentEditable="true" class="sudEnter"></td> 
      </tr> 
     </table> 
     </td> 
    </tr> 
    <tr> 
     <th>B</th> 
    </tr> 
    <tr> 
     <th>C</th> 
    </tr> 
    <tr> 
     <th>D</th> 
     <td colspan="3" rowspan="3" class="goldBox"> 
     <table class="subTable"> 
      <tr> 
      <td contentEditable="true" class="sudEnter"></td> 
      <td contentEditable="true" class="sudEnter"></td> 
      <td contentEditable="true" class="sudEnter"></td> 
      </tr> 
      <tr> 
      <td>6</td> 
      <td contentEditable="true" class="sudEnter"></td> 
      <td>9</td> 
      </tr> 
      <tr> 
      <td>4</td> 
      <td>7</td> 
      <td>2</td> 
      </tr> 
     </table> 
     </td> 
     <td colspan="3" rowspan="3" class="greenBox"> 
     <table class="subTable"> 
      <tr> 
      <td contentEditable="true" class="sudEnter"></td> 
      <td>2</td> 
      <td contentEditable="true" class="sudEnter"></td> 
      </tr> 
      <tr> 
      <td contentEditable="true" class="sudEnter"></td> 
      <td contentEditable="true" class="sudEnter"></td> 
      <td contentEditable="true" class="sudEnter"></td> 
      </tr> 
      <tr> 
      <td contentEditable="true" class="sudEnter"></td> 
      <td>9</td> 
      <td contentEditable="true" class="sudEnter"></td> 
      </tr> 
     </table> 
     </td> 
     <td colspan="3" rowspan="3" class="goldBox"> 
     <table class="subTable"> 
      <tr> 
      <td>9</td> 
      <td>3</td> 
      <td>7</td> 
      </tr> 
      <tr> 
      <td>4</td> 
      <td contentEditable="true" class="sudEnter"></td> 
      <td>8</td> 
      </tr> 
      <tr> 
      <td contentEditable="true" class="sudEnter"></td> 
      <td contentEditable="true" class="sudEnter"></td> 
      <td contentEditable="true" class="sudEnter"></td> 
      </tr> 
     </table> 
     </td> 
    </tr> 
    <tr> 
     <th>E</th> 
    </tr> 
    <tr> 
     <th>F</th> 
    </tr> 
    <tr> 
     <th>G</th> 
     <td colspan="3" rowspan="3" class="greenBox"> 
     <table class="subTable"> 
      <tr> 
      <td contentEditable="true" class="sudEnter"></td> 
      <td contentEditable="true" class="sudEnter"></td> 
      <td>1</td> 
      </tr> 
      <tr> 
      <td contentEditable="true" class="sudEnter"></td> 
      <td>4</td> 
      <td>5</td> 
      </tr> 
      <tr> 
      <td contentEditable="true" class="sudEnter"></td> 
      <td>6</td> 
      <td contentEditable="true" class="sudEnter"></td> 
      </tr> 
     </table> 
     </td> 
     <td colspan="3" rowspan="3" class="goldBox"> 
     <table class="subTable"> 
      <tr> 
      <td contentEditable="true" class="sudEnter"></td> 
      <td contentEditable="true" class="sudEnter"></td> 
      <td contentEditable="true" class="sudEnter"></td> 
      </tr> 
      <tr> 
      <td contentEditable="true" class="sudEnter"></td> 
      <td contentEditable="true" class="sudEnter"></td> 
      <td contentEditable="true" class="sudEnter"></td> 
      </tr> 
      <tr> 
      <td>8</td> 
      <td contentEditable="true"></td> 
      <td>1</td> 
      </tr> 
     </table> 
     </td> 
     <td colspan="3" rowspan="3" class="greenBox"> 
     <table class="subTable"> 
      <tr> 
      <td contentEditable="true" class="sudEnter"></td> 
      <td>5</td> 
      <td>2</td> 
      </tr> 
      <tr> 
      <td contentEditable="true" class="sudEnter"></td> 
      <td contentEditable="true" class="sudEnter"></td> 
      <td contentEditable="true" class="sudEnter"></td> 
      </tr> 
      <tr> 
      <td>7</td> 
      <td contentEditable="true" class="sudEnter"></td> 
      <td contentEditable="true" class="sudEnter"></td> 
      </tr> 
     </table> 
     </td> 
    </tr> 
    <tr> 
     <th>H</th> 
    </tr> 
    <tr> 
     <th>I</th> 
    </tr> 
    </tbody> 
</table> 

这是我独在HTML，这里是我此刻的JS：

function inputCheck() { 
    var userInput = "" 
    userInput = document.getElementsByClassName("sudEnter"); 

    if (userInput > 0) { 
    userInput === userInput; 
    } else if (userInput < 9) { 
    userInput === userInput; 
    } else { 
    document.getElementsByClassName("sudEnter").value = ""; 
    } 
} 

document.addEventListener("keyup", inputCheck); 

Answer 1

在你的，如果你使用的是===这是用来比较的变量。你基本上比较userInput和userInput。只要使用一个=尽管如果你不需要做任何事情。

Answer 2

尝试代input type="number"元件与min属性设置为0，max属性设置为9为td元件

$("input").change(function() { 
 
    if (this.value > this.max) { 
 
    this.value = this.max 
 
    } 
 
    if (this.value < this.min) { 
 
    this.value = this.min 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<input type="number" min="0" max="9" value="0" />