Question

68

How to disable input/click on textbox/image using JavaScript?

rated 0 times [ 69] [ 1] / answers: 1 / hits: 26856 / 11 Years ago, thu, february 13, 2014, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

blair

Add To Favorites

Follow

Total Points: 384

Total Questions: 108

Total Answers: 86

Location: Northern Ireland

Member since Tue, May 5, 2020

4 Years ago

blair questions

1 Ant design Form.Item validation style

Sat, Feb 12, 22, 00:00, 2 Years ago

1 Option useFindAndModify is not supported

Wed, Aug 25, 21, 00:00, 3 Years ago

1 Discord.js | Buttons doesn't work after bot restarts

Sat, Jul 10, 21, 00:00, 3 Years ago

1 pass custom event properties with fireEvent (testing-library and jest)

Wed, Oct 21, 20, 00:00, 4 Years ago

1 Change NavLink text Color onClick

Tue, Aug 25, 20, 00:00, 4 Years ago

View All

answered 11 Years ago nikhilh · Accepted Answer

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