Mask Jquery does not work

Navigation
0

I'm trying to use jquery's mask, I'm going to use it < input > added by javascript by the action of selecting a < option

asked by anonymous 30.07.2016 / 01:50

2 answers

0

The problem that occurs is because you add the mask when the page is initialized, but when this occurs the element with id="dia" is not yet loaded in the HTML document.

So since you are dynamically adding the element with id="dia" to the document, you will also have to add the mask dynamically after you add the elements in the HTML document.

Here's how you can solve your problem: 

function muda() {
  if (document.getElementById("sel").value == "option1") {
    document.getElementById('rdo').innerHTML =
      "<div class='form-group'><label class='col-sm-2' for='dia' control-label>Dia</label><div class='col-sm-9'><input class='form-control' type='date' name='dia' id='dia' required autofocus></div></div>" +
      "<div class='form-group'><label class='col-sm-2' for='hora' control-label>Hora</label><div class='col-sm-9'><input class='form-control' type='time' name='hora' required></div></div>" +
      "<div class='form-group'><label class='col-sm-2' for='local' control-label>Local</label><div class='col-sm-9'><input class='form-control' size='251' maxlength='250' type='text' name='local' required></div></div>" +
      "<div class='form-group'><label class='col-sm-2' for='endereco' control-label>Endere&ccedil;o</label><div class='col-sm-9'><input class='form-control' maxlength='500' type='text' name='endereco' required></div></div>" +
      "<div class='form-group'><label class='col-sm-2' for='obs' control-label>OBS</label><div class='col-sm-9'><input class='form-control' maxlength='500' type='text' name='obs'></div></div>";
  } else {
    document.getElementById('rdo').innerHTML = "";
  }
  
  $("#dia").mask("99/99/9999")

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.3.1/jquery.maskedinput.min.js"></script>

<select name="opcao" id="sel" onchange="muda()" class="form-control">
        <option value="option1">option1</option>
        <option value="option1">option1</option>
</select>

<div class='col-sm-9 text-left' id="rdo">
    </div>
    
30.07.2016 / 02:55
0

jQuery Masked Input is designed to work with text input. You are attempting to insert a mask into a date field (which by itself does not need to be formatted by automatically fetching it by adhering to date-pattern rules based on your locale ). Change the type of your input to text that the mask should work.

    
30.07.2016 / 02:32
Get lower_bound from a multiset in index mode 0 Download files in WebView on android 6.0