OnKeyPress and caret position

[Mike]

Hello,

Is there a feasible way of determining what the new value will be of an input control inside of a OnKeyPress client-side handler?

- I've seen a lot of postings here showing sender.get_value() + args.get_keyCharacter() - but of course that assumes that the user is typing straight through and the cursor is at the end of the control. Not always the case! ;)
- The reason I'm looking to do this is to implement regex validation in real time (keydown or OnKeyPress), before the control loses focus. OnValueChanged and OnValueChanging occur on blur. (ASP.NET validation on post-back is clumsy and not appropriate for the circumstances we need this).

Ideally, though, Telerik could release a RegEx version of RadTextBox!

Thanks,

- Mike

[Tsvetina]

Hi Mike,

You can attach an onkeyup javascript event to the RadTextBox in the PageLoad event handler, by using the following code:

RadTextBox1.Attributes.Add("onkeyup", "OnKeyUp(this, event);");

Then, it is easy to get the full value (including the last-typed character) of the text box, by using the get_textBoxValue() client-side method of the control:

function OnKeyUp(sender, eventArgs) {
            var textBox = $find("<%= RadTextBox1.ClientID %>");
            var textInput= textBox.get_textBoxValue();
        }

Greetings,
Tsvetina
the Telerik team

[Mike]

Hello,

Thanks for your response. The problem with examining the value on KeyUp is that I want to do real-time validation of the text box value - as you do with your other textbox-based controls. If I wait until KeyUp, the value is already there in the text box, visible to the user.

- Mike

[Tsvetina]

Hi Mike,

In this case you can wire OnKeyPress client-side event of the control, take the text box value, split it at the caret position and insert the new key character there. In this way you will get the new value of the textbox before the new character appears in it.

function OnKeyPress(sender, eventArgs) {
            var oldText = sender._textBoxElement.value;
            var substr1 = oldText.substr(0, sender.get_caretPosition());
            var substr2 = oldText.substr(sender.get_caretPosition());
            var newText = substr1 + eventArgs.get_keyCharacter() + substr2;
        }

I hope this helps.

All the best,
Tsvetina
the Telerik team

[Nicolaas]

This doesnt work if the user selects the the text (currently in the textbox) and then types.

The this code appends it or puts it in front (where the cursor is)

[Tsvetina]

Hi Nicolaas,

In such scenario you can check in advance whether the text in the textbox is already selected, using an approach similar to:
http://stackoverflow.com/questions/3046623/check-if-an-input-item-text-is-already-selected

All the best,
Tsvetina
the Telerik team