Отключить ввод в html

Question

Я создаю 8 игра-головоломку в Javascript и JQuery mobile. Я сделал коробки с <input readonly></input>, и я поместил их все в таблицу 9x9. Проблема в том, что, когда я нажимаю на поле, чтобы переместить его, даже если он доступен только для чтения, мобильное устройство пытается записать в нем и отображает клавиатуру. Это не то, что я хочу ... Я хочу отключить ввод или использовать что-то отличное от <input>. Я попытался отключить = "отключено", но все равно не работает. Это код:

<form name="box"> 
    </center> 
    <table align="center"> 
     <tr> 
      <td ><input name="casella1" value="8" onClick="test(this.value)" readonly style="text-align: center; width:50px; height:50px; font-weight:bold; background-color: #C0C0C0; border-style: solid; border-color: black"></td> 
      <td ><input name="casella2" value="5" onClick="test(this.value)" readonly style="text-align: center; width:50px; height:50px; font-weight:bold; background-color: #C0C0C0; border-style: solid; border-color: black"></td> 
      <td ><input name="casella3" value="2" onClick="test(this.value)" readonly style="text-align: center; width:50px; height:50px; font-weight:bold; background-color: #C0C0C0; border-style: solid; border-color: black"></td> 
     </tr> 
     <tr> 
      <td ><input name="casella4" value="6" onClick="test(this.value)" readonly style="text-align: center; width:50px; height:50px; font-weight:bold; background-color: #C0C0C0; border-style: solid; border-color: black"></td> 
      <td ><input name="casella5" value="3" onClick="test(this.value)" readonly style="text-align: center; width:50px; height:50px; font-weight:bold; background-color: #C0C0C0; border-style: solid; border-color: black"></td> 
      <td ><input name="casella6" value="4" onClick="test(this.value)" readonly style="text-align: center; width:50px; height:50px; font-weight:bold; background-color: #C0C0C0; border-style: solid; border-color: black"></td> 
     </tr> 
     <tr> 
      <td ><input name="casella7" value="1" onClick="test(this.value)" readonly style="text-align: center; width:50px; height:50px; font-weight:bold; background-color: #C0C0C0; border-style: solid; border-color: black"></td> 
      <td ><input name="casella8" value="7" onClick="test(this.value)" readonly style="text-align: center; width:50px; height:50px; font-weight:bold; background-color: #C0C0C0; border-style: solid; border-color: black"></td> 
      <td ><input name="casella9" value="" onClick="test(this.value)" readonly style="text-align: center; width:50px; height:50px; font-weight:bold; background-color: #C0C0C0; border-style: solid; border-color: black"></td> 

     </tr> 
    </table> 
    </form>  

Answer 1

Вы должны использовать disabled="disabled" вместо disable="disable"!

Answer 2

$("input").attr("disabled","true"); 

является решением JQuery, и настройка disabled в разметке HTML является решением.

Answer 3

Если вы используете HTML5, то атрибут disabled будет достаточным, так как это логический атрибут.