stop cursor until text is changed in textarea in javascript

Question

Trying to allow a user to type into a textarea, but if a certain word is seen, I would like the cursor to stop until that word is removed.

I have finding the word, but I am unable find a way to have the cursor stop.

Any ideas on how i would do this in javascript

 $(function() {
            $('#ideacomment').bind('keyup', function(e){
                var characterLimit = 300;
                charactersUsed = $(this).val().length;

                if(charactersUsed > characterLimit){
                    charactersUsed = characterLimit;
                    $(this).val($(this).val().substr(0, characterLimit));
                    $(this).scrollTop($(this)[0].scrollHeight);
                }
                var charactersRemaining = characterLimit - charactersUsed;
                $('#remainingCharacters').html(charactersRemaining);

                 var words = $('#ideacomment').val().split(/\b[\s,\.-:;]*/);
                 var wordcount = words.length;
                 var nonewords = new Array("f**k", "you");
                 var nonewordcount = nonewords.length;
                //console.log(nonewordcount + ' is the count');

                for(var i = 0; i < wordcount; i++) {

                    for(var t = 0; t < nonewordcount; t++) {
                        if(words[i] == nonewords[t]) {
                            message('No swearing please! <br><br> This post will not succeed!<br><br> Please remove it before you continue!', '430');
                            }
                        }
            }
            });


      });

The code above counts the number of chars and also checks each word. Would I would like and I have tried without success is have it as if it ran out of space. But i have been unable to make it happen using the same code the limiter?

This is the new code. Still not working though:

        $(function() {
            $('#ideacomment').bind('keyup', function(e){
                var characterLimit = 300;
                charactersUsed = $(this).val().length;

                if(charactersUsed > characterLimit){
                    charactersUsed = characterLimit;
                    $(this).val($(this).val().substr(0, characterLimit));
                    $(this).scrollTop($(this)[0].scrollHeight);
                }
                var charactersRemaining = characterLimit - charactersUsed;
                $('#remainingCharacters').html(charactersRemaining);

                 var nonewords = new Array("hey", "you");
                 var nonewordcount = nonewords.length;
                 for(var t = 0; t < nonewordcount; t++) {
                     if ($(this).val().indexOf(nonewords[t]) != -1) {
                        message('No swearing please! <br><br> This post will not succeed!<br><br> Please remove it before you continue!', '430');
                         var keycode = e.charCode || e.keyCode;
                            console.log(keycode);
                            if (keycode !== 8 && keycode !== 46)
                                return false;
                                }   
    }

                 });
            });

Answer 1

You could check which key is being pressed, and block it if it is not a Backspace or Delete. Here is a simplified example:

$(function() {
    $('#textbox').keydown(function(e) {
        if ($(this).val().indexOf('test') != -1) {
            var keycode = e.charCode || e.keyCode;
            if (keycode !== 8 && keycode !== 46)
                return false;
        }
    });
});​

jsFiddle Demo

Since you already seem to have the text-checking and notification part, all you're really missing is just the keypress-blocking part.