Home Forums Porto Admin Template advanced masked input?

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #10030156
    pellesoft
    Participant

    First of all, thank you ever so much for all help. The template is now state of art and i think that this is a really beautiful product that you have built!

    Now to a little more advanced question, perhaps you can help me. I want to do a masked input with a ean-code (13 digits). I do not want the user to edit the first 9, just the last one..

    732 999 102 … ……

    So i want to use the masked input to show these first numbers, and let the user edit the rest of them, for eg. “108 123456”

    Is it possible with the masked input function to do this?

    Its little like the credit card (the routine does not work on my safari, but perhaps on your browser), https://coreui.io/docs/components/masked-input/ but having some of the first numbers pre-added and could not be changed so to speak.

    I think that the placeholder could look like this
    “732 999 102 108 AAA AAAAAA”

    the numbers are pre-entered in black and the cursor waits to edit the rest .. and they are in grey so it looks like placeholder.

    Is this impossible? 🙂

    Best regards
    Pelle


    #10030160
    pellesoft
    Participant
    #10030169
    Support2
    Keymaster

    Hello Pelle,

    With the masked input plugin unfortunately this is not possible, since Porto Admin don’t comes with a ready code for this.

    But here is my suggestion for you:

    1) HTML:

    <div class="custom-input-example" data-prefix="123456789-">
    	<input class="form-control" type="text" id="example" value="" placeholder="1234" maxlength="4" />
    </div>

    2) CSS:

    .custom-input-example {
    	position: relative;
    	margin-left: 79px;
    }
    
    .custom-input-example:before {
    	content: attr(data-prefix);
    	position: absolute;
    	top: 50%;
    	right: calc( 100% + 5px );
    	transform: translate3d(0, -50%, 0);
    }
    
    .custom-input-example input {
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
        color: #495057;
    }

    I think the code above will fits in your needs.

    Hope this helps.

    Kind Regards,

    Rodrigo.


Viewing 3 posts - 1 through 3 (of 3 total)