Flex 3: disable backspace and delete in a TextArea

Question

I'm trying to prevent any key from altering the text in a Flex TextArea. I don't want to set the editable property to false, because I want the caret to be visible for a 'current position' indicator, so that the user knows where a search he initiates will start from.

I've added event handlers for change and textInput, as well as keyUp and keyDown that do an 'event.preventDefault' as well as a 'event.stopImmediatePropagation'. This works just fine for most keys, with the exception of backspace and delete.

Is there any way to prevent these from doing anything ?

In your event listeners where you preventDefault and stopPropagation are you using the capture phase? — JD Isaacks, Dec 09 '10 at 20:06

score 2 · Answer 1 · answered Dec 09 '10 at 12:06

2

This may help:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![CDATA[
            private function onKeyDown(event:KeyboardEvent):void {
                if ( event.keyCode == 8 || event.keyCode == 46 ) {
                    event.preventDefault();
                }
            }
    ]]>
    </mx:Script>
    <mx:TextArea keyDown="onKeyDown(event);" width="100%" height="100%" />
</mx:WindowedApplication>

answered Dec 09 '10 at 12:06

Unfortunately it doesn't ! I have tried something similar to this, and although the event handler is called, the text is still deleted, and I don't know why...... – Nic Dec 09 '10 at 12:21
Ok, I've tested as a Desktop Application and works, but as a Web Application doesn't work. – Lucas Gabriel Sánchez Dec 09 '10 at 13:40

score 1 · Answer 2 · answered Dec 09 '10 at 11:34

1

Why not just reinsert the text on change?

answered Dec 09 '10 at 11:34

spender

117,338
33
229
351

Hmm - interesting idea, but by the time the change event is fired, the text field has already changed, implying I'd have to keep a second copy of the text. I'll be dealing with some quite big strings so would prefer not to do that. Also, the selection begin and end indexes are both equal at this stage, so if the user had selected a block of text there doesn't seem to be a way to work out what he actually changed ? Or can you get that from the event somewhere ? – Nic Dec 09 '10 at 11:44
@Mike You do not have to keep a second copy of the text if you bind the textfield to a variable that holds the text. Then to change the text, change the variable. and in the key listener of the textfield reset to the value of your var. I haven't tested this but it sounds right in my head. – JD Isaacks Dec 09 '10 at 20:11

score 1 · Accepted Answer · 2010-12-09T15:24:54.833

Hmmm, seems like it really doesn't work in the browser, how about a workaround, not sure if you'll like it but seems to be achieving what you need apart from pasting:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;

            private var _lastSelStart:Number = 0;
            private var _lastSelEnd:Number = 0;
            private var _lastText:String = null;
            private var _prevent:Boolean = false;

        private function onKeyDown(event:KeyboardEvent):void {
            if ( event.keyCode == 8 || event.keyCode == 46 ) {
                if ( !_prevent ) {
                    _prevent = true;
                    _lastText = txt.text;
                    _lastSelStart = txt.selectionBeginIndex;
                    _lastSelEnd = txt.selectionEndIndex;
                }
            }
        }

        private function onKeyUp( event:KeyboardEvent ):void {
            if ( _prevent ) {
                _prevent = false;
                txt.text = _lastText;
                _lastText = null;
                callLater(txt.setSelection, [_lastSelStart, _lastSelEnd]);
            }
        }

        ]]>
    </mx:Script>
    <mx:TextArea keyDown="onKeyDown(event);" keyUp="onKeyUp(event);" width="100%" height="100%"
        id="txt" />
</mx:Application>

Thanks very much for your help - much appreciated. I think I'll also need some logic to cope with held down keys, but this looks good. Shame about having to make a copy of the string though - it could go bang ! — Nic, Dec 09 '10 at 14:51
I modified the code to handle keys being held down. Also, if this helps can you mark it as answer? — , Dec 09 '10 at 15:26

score 0 · Answer 4 · edited May 23 '17 at 11:51

0

I think I've figured out a way: in flash the preventDefault don't work for key event, but they work well for changing event. You can do something similar to this https://stackoverflow.com/a/8078910/1927950 to avoid any modification but still keep the caret.

edited May 23 '17 at 11:51

Community

1
1

answered Aug 28 '13 at 10:59

AERYEN

21
2

Flex 3: disable backspace and delete in a TextArea

4 Answers4