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>

Val · Accepted Answer · 2013-02-11 15:32:11Z

11

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

answered Feb 11, 2013 at 15:32

Val

7628 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Malo Over a year ago

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?

Saeed Neamati · Accepted Answer · 2013-02-11 15:35:49Z

3

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

answered Feb 11, 2013 at 15:35

Saeed Neamati

35.9k42 gold badges140 silver badges192 bronze badges

Comments

Jon Egerton · Accepted Answer · 2013-02-11 15:49:58Z

3

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

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

edited Feb 11, 2013 at 15:49

Jon Egerton

41.7k11 gold badges100 silver badges130 bronze badges

answered Feb 11, 2013 at 15:33

defau1t

10.6k2 gold badges37 silver badges47 bronze badges

Collectives™ on Stack Overflow

Disable input in html

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related