Add an INPUT to it (as a serial key)

Question

Add an INPUT to it (as a serial key)

Navigation

#1 by (2 votes)

0

I want to format an input, I do not know what to do: '(

I want the format to come out this way

00-00-0000-1234567

But it comes out like this

00-00-1234567-0000

<form id="form" method="post" action="">
        <input id="serial" name="serial" type="text"  maxlength="15" />
    </form>

    <script>
(function($, undefined) {

    "use strict";


    $(function() {

        var $form = $( "#form" );
        var $input = $form.find( "input" );

        $input.on( "keyup", function( event ) {
            var selection = window.getSelection().toString();
            if ( selection !== '' ) {
                return;
            }
            if ( $.inArray( event.keyCode, [38,40,37,39] ) !== -1 ) {
                return;
            }

            var $this = $(this);
            var input = $this.val();
                    input = input.replace(/[\W\s\._\-]+/g, '');
                var split = 4;
                var chunk = [];
                for (var i = 0, len = input.length; i < len; i += split) {
                    split = ( i >= 4 && i <= 15 ) ? 7 : 2;
                    chunk.push( input.substr( i, split ) );
                }
                $this.val(function() {
                    return chunk.join("-").toUpperCase();
                });

        } );


        $form.on( "submit", function( event ) {

            var $this = $( this );
            var arr = $this.serializeArray();

            for (var i = 0; i < arr.length; i++) {
                    arr[i].value = arr[i].value.replace(/[($)\s\._\-]+/g, ''); 
            };

            console.log( arr );
            event.preventDefault();
        });

    });
})(jQuery);
</script>

javascript html5

asked by Luis Hernandez 30.06.2018 в 00:24

source

1 answer

change number 3 in line [closed] Error connect Mysql with SpringBoot

score 2 · Answer 1

I think a if else if would be more convenient in this case. Note that your input has maxlength="15" so it would not allow you to enter all the text you want.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form" method="post" action="">
        <input id="serial" name="serial" type="text"  maxlength="15" />
    </form>

    <script>
(function($, undefined) {

    "use strict";


    $(function() {

        var $form = $( "#form" );
        var $input = $form.find( "input" );

        $input.on( "keyup", function( event ) {
            var selection = window.getSelection().toString();
            if ( selection !== '' ) {
                return;
            }
            if ( $.inArray( event.keyCode, [38,40,37,39] ) !== -1 ) {
                return;
            }

            var $this = $(this);
            var input = $this.val();
                    input = input.replace(/[\W\s\._\-]+/g, '');
                var split = 4;
                var chunk = [];
                for (var i = 0, len = input.length; i < len; i += split) {
                    if(i < 4) {
                      split = 2;
                    } else if(i < 8) {
                      split = 4;
                    } else {
                      split = 7;
                    }
                    
                    chunk.push( input.substr( i, split ) );
                }
                $this.val(function() {
                    return chunk.join("-").toUpperCase();
                });

        } );


        $form.on( "submit", function( event ) {

            var $this = $( this );
            var arr = $this.serializeArray();

            for (var i = 0; i < arr.length; i++) {
                    arr[i].value = arr[i].value.replace(/[($)\s\._\-]+/g, ''); 
            };

            console.log( arr );
            event.preventDefault();
        });

    });
})(jQuery);
</script>