禁用HTML中的输入

Question

我正在使用Javascript和Jquery mobile创建8拼图游戏。我已经将所有方块放在一个9x9的表格中，每个方块使用<input readonly></input>实现。但是当我点击一个方块进行移动时，即使它是只读的，移动设备仍会尝试在其中写入内容并显示键盘，这不是我想要的。我希望禁用输入或使用与<input>不同的东西。我尝试了disable="disabled"但仍然不起作用。 以下是代码：

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

- Malo

Answer 1

您应该使用 disabled="disabled" 而不是 disable="disable"！

- Val

---

不，这里是我打错了一个拼写错误，但是我在代码中写了disabled="disabled"！它无法工作，因为JavaScript代码没有执行（onClick被禁用），移动设备仍然显示键盘！还有其他方法吗？ - Malo

Answer 2

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

jQuery是解决方法，而将disabled属性设置在标记中则是HTML的解决方法。

- defau1t

Answer 3

如果您正在使用HTML5，则包含disabled属性就足够了，因为它是一个布尔属性。

- Saeed Neamati