Creation of Masks with javascript

Asked

Viewed 229 times

1

I need to create masks for some inputs that I have in the code, and had already asked about it, but I think the post was outdated and then was "forgotten". However what he had achieved with that post was:

HTML:

Within the <HEAD>:

        <script src="assets/plugins/jquery.maskedinput.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

Within the <BODY>:

<input type="text" name="search" id="search" placeholder="Escreva o número de processo aqui..." required maxlength="5">

Javascript after </HTML>:

<script type="text/javascript">

        $(document).ready(function(){
            $("#search").mask("99999");
        });

and yet it doesn’t work. I’ve tried to create a new page to test this function but it didn’t work either. Anyone has any idea what’s going on?

javascript jquery html

  • You have to first load jquery, then Masked input and finally your Document.ready

  • What do you mean? jquery, Voce is talking about libraries? then the script?

  • This, take a look at the answer and try to change the order of loading the JS files

2 answers

2

The problem occurs due to failure in the loading order of the scripts. Make the following change: 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="assets/plugins/jquery.maskedinput.js"></script>

Edit: I rode a fiddle: https://jsfiddle.net/61tok014/ and apparently it worked.

  • tried what they said, but it still doesn’t work. there’s no other way to make masks?

  • I do all my masks with this plugin no problem. Make sure the files are loading.?

  • I use many plugins, to get font-awesome icons, bootstrap modals etc.. Is that why? I should put the Mask first?

  • That you have to put first the jquery after the plugins I’m sure

  • I use the sublime text, and usually save the projects with UTF-8 with BOM makes a difference?

1

I did it! I changed it

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="assets/plugins/jquery.maskedinput.js"></script>

for

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>

Thanks for the help

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.