Disable input in html

Question

I'm creating the 8 puzzle box game in Javascript and Jquery mobile. I've done the boxes with an <input readonly></input> and I've putted all of them in a 9x9 table. The problem is that when I click on a box to move it,even if it is readonly, the mobile device try to write in it and shows the keyboard. This is not what I want...I want to disable the input or use something different from <input>. I tried with disable="disabled" but still doesn't work. This is the code:

<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>

score 11 · Answer 1 · answered Feb 11 '13 at 15:32

11

You should use disabled="disabled" instead of disable="disable" !

answered Feb 11 '13 at 15:32

Val

762
8
32

No, it was a spelling error that I made here, but I wrote disabled="disabled" in the code! It doesn't work because the javascript code isn't executed (onClick is disabled) and the mobile device still shows the kyboard! There isn't another way? – Malo Feb 11 '13 at 17:20

score 3 · Answer 2 · edited Feb 11 '13 at 15:49

3

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

is the jQuery solution, and setting disabled in markup is the html solution.

edited Feb 11 '13 at 15:49

Jon Egerton

40,401
11
97
129

answered Feb 11 '13 at 15:33

defau1t

10,593
2
35
47

score 3 · Answer 3 · answered Feb 11 '13 at 15:35

3

If you're using HTML5, then including disabled attribute would suffice, as it's a Boolean attribute.

answered Feb 11 '13 at 15:35

Saeed Neamati

35,341
41
136
188

Disable input in html

3 Answers3