Question

我正在尝试在文本框中禁用输入事件，并在JavaScript中单击图像上的事件。

这是我的HTML：

<div id="div1">
    Img1: <img id="img1" onclick="alert('Clicked Div1');" />
</div>

<div id="div2">
    txt1: <input type="text" id="txt1" />
</div>

<input type="button" value="Disable It"  onclick="disable();" />
<input type="button" value="Enable It"  onclick="enable();" />

这是JavaScript：

function disable()
{
    document.getElementsByName('txt1').disabled = true;
    document.getElementById("div1").disabled = true;
    document.getElementById("div2").disabled = true;
    document.getElementById("img1").disabled = true;
}
function enable()
{
    document.getElementsByName('txt1').disabled = false;
    document.getElementById("div1").disabled = false;
    document.getElementById("div2").disabled = false;
    document.getElementById("img1").disabled = false;
}

在上面的代码中，只有document.getElementById("img1").disabled = true;禁用图像，这也仅限于IE8。它不适用于Chrome（V 32.0.1700.107 m）和Firefox（26.0）。

我尝试了this answer中给出的JavaScript。但它不适用于Chrome和Firefox。

我该怎么做？我错过了什么吗？我正在尝试使用JavaScript（而不是jQuery）来实现这一点。

Answer 1

您也应该通过其ID来定位文本输入。

document.getElementById('txt1').disabled = true;

关于图像，这可能会引导您朝着正确的方向前进。您可以执行的操作是向onmousedown和onmouseup添加一个函数，以阻止左键单击功能的图像元素。 Here's a DEMO。

然而，这不会禁用div。

function right(e) {
    if (navigator.appName == 'Netscape' && e.which == 1) {
        return false;
    }
    if (navigator.appName == 'Microsoft Internet Explorer' && event.button == 1) {
        return false;
    } else return true;
}


function disableit() {
    document.getElementById('txt1').disabled = true;
    document.getElementById("div1").disabled = true;
    document.getElementById("div2").disabled = true;
    document.getElementById("img1").onmouseup = right;
    document.getElementById("img1").onmousedown = right;
    document.getElementById("img1").onclick = right;
}

function enableit() {
    document.getElementById('txt1').disabled = false;
    document.getElementById("div1").disabled = false;
    document.getElementById("div2").disabled = false;
    document.getElementById("img1").onmouseup = null;
    document.getElementById("img1").onmousedown = null;
    document.getElementById("img1").onclick = yourFunction;
}

function yourFunction() {
    alert('Clicked Div1');
}

您还应该将图片上的onclick设置为yourFunction，如下所示：

<img id="img1" onclick="yourFunction();" />

Answer 2

将getElementById用于文本框。

试试这样：

function disable()
{
    document.getElementById('txt1').disabled = true;
   document.getElementById("div1").disabled = true;
    document.getElementById("div2").disabled = true;
    document.getElementById("img1").disabled = true;

}
function enable()
{
    document.getElementById('txt1').disabled = false;
   document.getElementById("div1").disabled = false;
   document.getElementById("div2").disabled = false;
    document.getElementById("img1").disabled = false;
}

请在此处找到工作代码JsBin

如何使用JavaScript禁用输入/单击文本框/图像？

2 个答案: