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

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();" />