admin 管理员组

文章数量: 1086019

I am trying to disable input event in textbox and click event on image in JavaScript.

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

This is 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;
}

In the above code only image is disabled by document.getElementById("img1").disabled = true; that too only on IE8. It doesn't work on Chrome (V 32.0.1700.107 m) and Firefox (26.0).

I tried the JavaScript given in this answer. But it doesn't work on Chrome and Firefox.

How can I do this? Am I missing anything? I am trying to achieve this using JavaScript (not jQuery).

I am trying to disable input event in textbox and click event on image in JavaScript.

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

This is 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;
}

In the above code only image is disabled by document.getElementById("img1").disabled = true; that too only on IE8. It doesn't work on Chrome (V 32.0.1700.107 m) and Firefox (26.0).

I tried the JavaScript given in this answer. But it doesn't work on Chrome and Firefox.

How can I do this? Am I missing anything? I am trying to achieve this using JavaScript (not jQuery).

  • javascript
  • html
Share Improve this question edited May 23, 2017 at 12:29 CommunityBot 11 silver badge asked Feb 13, 2014 at 8:21 HimanshuHimanshu 32.6k32 gold badges115 silver badges136 bronze badges 1
  • @NikhilButani: I am trying with JavaScript. – Himanshu Commented Feb 13, 2014 at 8:54
Add a ment  | 

2 Answers 2

Reset to default 1

You should target the text input by its id too.

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

Concerning the image, this might guide you in the right direction. What you can do is add a function to onmousedown and onmouseup to the image element that prevents the left-click feature. Here's a DEMO.

This won't disable the div's however.

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');
}

You should also set the onclick on the image to yourFunction, like this:

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

Use getElementById for textbox.

Try like this:

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

Please Find working code here JsBin

本文标签： htmlHow to disable inputclick on textboximage using JavaScriptStack Overflow

版权声明：本文标题：html - How to disable inputclick on textboximage using JavaScript? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744086622a2531248.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。