CODEWITHSUNDEEP
javascript
bill
bill

Reputation: 55

Javascript OnChange detection for textarea

I have a textarea, a button and some drop down lists. The user goes through the ddls and answers some questions and I generate text in the textarea based upon the drop down lists.

At a certain point in the questioning, the button becomes visable for submission; I'm not actually submitting the page onclick, I'm doing other client side stuff.

The gist of the question is this: I want the button to disappear (display:none;) if the user attempts to edit the textarea; either directly or through pasting/context menus. It is okay if the user edits the textarea, but the button is no longer relevant to the application. How do I detect if the textarea is being changed.

Edit: I can't use jQuery.

Upvotes: 0

Views: 10816

Answers (4)

Tim Down
Tim Down

Reputation: 324717

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

Upvotes: 3

Mic
Mic

Reputation: 25184

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>

Upvotes: 0

griegs
griegs

Reputation: 22770

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

Upvotes: -2

casablanca
casablanca

Reputation: 70721

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.

Upvotes: 0

Related Questions