ansaurus

Question

Javascript OnChange detection for textarea

Answer 1

A:

If you can use jQuery i'd do that.

$('#MyElementname').change(function(){ alert('Changed!') })

or

$('#MyElementname').change(function(){ 
  if ( $(this).val() == "" )
    //do something
  else
    //do something else
 })

or

$('#MyElementname').keypress(function(){ 
  if ( $(this).val() == "" )
    //do something
  else
    //do something else
 })

Important:

Wrap all the above within;

$(document).ready(function() {
  //above code in here
});

griegs 2010-09-20 05:44:29

I can logically follow how this works so it may be of some help, but unfortunately I cannot use jQuery. I'll look into the keypress and onchange events of the textarea. I should have specified, thanks anyway though.

bill 2010-09-20 06:37:20

Answer 2

A:

There is already an onchange event that fires once the focus moves out of the textarea. This should work for your purpose, because the user can't click the button without moving focus out of the textarea.

If you have to detect changes quicker than that, and which works for both direct input and copy/paste, the only way I can think of is to use a timer that periodically checks if the text has changed.

casablanca 2010-09-20 05:47:42

Answer 3

A:

Here is a small example with onkeyup

<html>
<head></head>
<body>
    <textarea id="txt"></textarea><span id="res"></span>
    <script>
        document.getElementById('txt').onkeyup = function(e){
            var res = 'unchanged';
            if(this.oldValue !== this.value){
                this.oldValue = this.value;
                res = 'changed';
            }
            document.getElementById('res').innerHTML = res;     
        };
    </script>
</body>
</html>

Mic 2010-09-20 07:33:28

Paste, drag and drop?

Tim Down 2010-09-20 08:43:27

Damn! I answered to this problem on another question. You're right.

Mic 2010-09-20 13:02:04

Answer 4

A:

The change event is completely reliable but only fires when the textarea loses focus, which means that as soon as the user tries to click the button it will disappear. This therefore does have the desired result but with poor user experience.

The alternative is to monitor the textarea for changes, which is where it starts to get tricky. If you do it using an event-based approach, you need to detect keyboard input, pastes and drag and drop. Not all browsers support paste detection (notably Firefox 2 and all versions of Opera do not), so it's already getting tricky. The easier, more cross-browser but dirtier method is a polling-based approach, which you can combine with a handler for the textarea's blur event to prevent the possibility of the user clicking the button between polls. The following will only poll the textarea as long as it is has the focus:

var textarea = document.getElementById("your_textarea");
textarea.onfocus = function() {
    var initialValue = textarea.value;

    function testForChange() {
        if (textarea.value != initialValue) {
            // Do the button hiding stuff
        }
    }

    textarea.onblur = function() {
        window.clearInterval(timer);
        testForChange();
        textarea.onblur = null;
    };

    var timer = window.setInterval(function() {
        testForChange();
    }, 50);
};

Tim Down 2010-09-20 09:00:25

How would I got about turning the polling off after I hide the button?

bill 2010-09-20 09:10:06

`window.clearInterval(timer);` in `testForChange`, although maybe you'd want to make the button reappear if the user undoes the change they've made?

Tim Down 2010-09-20 10:37:25

ansaurus

tags:

views:

answers:

Javascript OnChange detection for textarea

related questions