CODEWITHSUNDEEP
javascriptjquery
Ray
Ray

Reputation: 6095

Generating event when user clicks in textarea with disabled=true, to tell them they can't modify it

I want to tell the user they can't modify a textarea that's been disabled for update, when they try to click in it. How can I tell them why it is disabled in this case, e.g. with an alert?

The problem is/was, when I give the textarea a disabled attribute, the events for it don't fire off either (at least in Chrome).

Upvotes: 2

Views: 3175

Answers (4)

Joseph Marikle
Joseph Marikle

Reputation: 78520

I would say wrap it in a span and give that the event. (note to all, it doesn't allow a click event on a disabled textarea in chrome).

http://jsfiddle.net/yU7ku/

HTML

<textarea disabled></textarea>

jQuery

$("[disabled]")
    .wrap("<span></span>")
    .parent()
    .click(function(){
        alert("this "+this.firstChild.nodeName+" is disabled");
    });

Upvotes: 0

Acaz Souza
Acaz Souza

Reputation: 8631

I think you should only use a disabled html attribute and do some stylish to disabled elements like a gray color:

<style>
  .disabled {
    background-color:gray;
  }
</style>

<textarea disabled="disabled" class="disabled" title="Disable for update"></textarea>

Upvotes: 0

Dennis
Dennis

Reputation: 14477

I'm guessing your main concern is that the disabledattribute doesn't allow events on IE.

The readonlyattribute, however, does:

<texarea readonly onclick="alert('Please do not edit me!');">

Upvotes: 5

orangething
orangething

Reputation: 740

Use the onclick property in the textarea tag. You could do it something like this:

<textarea onclick="alert('CAN'T TOUCH THIS!')">
    blahblahblahblahblahblahblah
</textarea>

Here's another example:

<textarea onclick="textareaclicked();">
    blahblahblahblahblahblahblah
</textarea>

<script type="text/javascript">
    function textareaclicked() {
        alert("CAN'T TOUCH THIS!");
    }
</script>

One final example:

<textarea onclick="textareaclicked('Someone set up us the bomb :(');">
    blahblahblahblahblahblahblah
</textarea>

<script type="text/javascript">
    function textareaclicked(var s) {
        alert(s);
    }
</script>

Upvotes: 0

Related Questions