RadMaskedTextBox skip to next mask part with literal

2 posts, 0 answers
  1. Massimiliano
    Massimiliano avatar
    184 posts
    Member since:
    Oct 2012

    Posted 09 Feb 2014 Link to this post

    Hallo,
    i would like to make the masked textbox a little more "usable". What I mean is this. I've seen that by default you can escape empty characters with the space bars or just clicking the cursor at the point in the mask where you want to write. Sometimes by the  way, there are text (like IPs or phone numbers, or such) where the text is separated by literals and it would be great to use those literals to skip to the next box part, so much more intuitive in my opinion.
    Pratical example.... for an IP mask you could have 255.255.255.255 but you could have as well 255.0.0.0 so each part, separated by the "." literal has a variable lenght.
    It would be much more usable if we could skip to the next part pressing the literal "." so for example you enter 0 then press "." you are already set to the next 0.
    The trick here would be to check the keypress, if it's not one of the allowed chars (this can be used both for numeric and text only masks) check for the first corresponding literal you find on the right of the cursor and move the cursor there.
    So for phone number for example, here we have variable lenght so we can have +39-0737-12345678 but we can have as well +39-02-1234 so skipping with the "-" literal to the next part makes it much more usable. And this is for all variable lenght parts wich include numeric/alpha characters only.

    Any hint on how to implement such functionality with JS? And do you think it would be a nice idea for a feature request? Some new option like SkipPartWithLiteral = "true" or such?

    Thanks in advance
  2. Massimiliano
    Massimiliano avatar
    184 posts
    Member since:
    Oct 2012

    Posted 10 Feb 2014 in reply to Massimiliano Link to this post

    OK I solved it myself. The problem is that this solution is great for variable length mask parts where you can enter a max number of chars but you can even choose to enter less, so skipping to the next mask part pressing the literal button is great.
    An example is the IP numbers, you just enter 2551 then press "." and you are already at "255.1." ready to go on.
    The problem is that RadMaskedTextbox doesn't support variable lenghts (that could be expressed for example in the mask with square bracket or any other convention lik ##[##] 2 mandatory and 2 optional numbers) and this renders this script only partially useful... I mean that you will be left with a bad visualization after you entered the value since you'll have prompts or empty spaces. In the IP example you are left with 255.1  .23 .3 wich is an awful rapresentation.
    Anyway here is the script, just bind the funcion to the ClientEvents-OnKeyPress="MaskSkipToLiteral" of RadMaskedTextbox

    function MaskSkipToLiteral(sender, event) {
        var key = event.get_keyCode()
        if (key < 48 || key > 90) {
            var char = String.fromCharCode(key);
            var text =  sender.get_valueWithPromptAndLiterals()
            var pos = text.indexOf(char, sender.get_caretPosition());
            if (pos != -1) { sender.set_caretPosition(pos) }
        }

  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top