Carregar Mascara em Input adicionado pelo innerHTML

[DiegoAlmeida 1]

Bom Dia pessoal, tenho uma função em meu código PHP que adiciona um input de acordo com a seleção

function setText(){
var x=document.getElementById('option1')
value = x.options[x.selectedIndex].value
if (value == '1')
  newInput.innerHTML = "<label>Valor da Aliquota (%)</label><input type='text' class='form-control' name='valor_issqn' data-validate='required'>"
else
  newInput.innerHTML = "<label>Valor da Aliquota (%)</label><input type='text' class='form-control' name='valor_issqn' readonly value='0.00'>"
}

No Código HTML está da seguinte forma:

<div class="col-md-2">
                            <label>ISS Retido?</label>
                            	<select class="form-control" name="iss_retido" onChange='setText()' id='option1' data-validate="required">
                                		<option value="">SELECIONE</option>
                                		<option value="1">SIM</option>
                                        <option value="2">NÃO</option>
                            	</select>
                           </div>
                           
                           <div class="col-md-2">
                            <!--<label>Valor da Aliquota (%)</label>-->
                            <div id='newInput'>
                            </div>
                            <!--<input type="text" class="form-control" name="valor_issqn">-->
                           </div>

Acontece que estou tentando adicionar uma mascara para valores decimais ex: (10.50, 10.10), chamando ela pelo ID (id='preco'), não carrega. Alguém sabe o que pode estar acontecendo?

[Marco Bruno 19]

Olá, Diego.

 

Você pode explicar um pouco melhor o que você está querendo?

 

Estou mô afim de te ajudar. :-)

[L. Henrique 179]

Sua dúvida está meio confusa, mas vamos tentando lapidar, vai que...

Bem, cada option é responsável por adicionar um tipo de label + input de acordo com o código JS, correto? Se você quer inserir uma máscara de valor, você precisar adicionar um id 'preco' ao input no innerHTML.

 

Você pode adicionar um plugin ao seu sistema chamado 'MaskedInput', que está disponível AQUI. Com ele adicionado ao seu sistema, você pode criar um outro arquivo JS e criar a seguinte condição:

$('#preco').mask('99.99');

Todos os input que tiverem a id 'preco' vão receber a máscara de valor '99.99'. O número 9 nesse caso é um blank-space que define a máscara (onde os caracteres podem aparecer e serem digitados), ou seja, seu input inicialmente estará em branco, mas ao digitar uma sequência de 4 dígitos (Ex.: 4879), resultará em: 48.79.

Obs.: Não esqueça de adicionar a id 'preço' ao seu input.

Obs.2: Como não entendi integralmente sua pergunta, resolvi optar por uma solução em JQ com plugin externo.

[DiegoAlmeida 1]

Muito Obrigado Pessoal, L. Henrique é exatamente isso que queria, desculpe por não ser mais claro na minha dúvida. Acontece que quando colocava o id'preco' a mascara não funcionava, e estava tudo certo, tanto que este id em outro campo de input fora do innerHtml funcionava. Mas fiz o seguinte usando uma função:

function moeda(z){
v = z.value;
v=v.replace(/\D/g,"") // permite digitar apenas numero
v=v.replace(/(\d{1})(\d{1,2})$/,"$1.$2") // coloca virgula antes dos ultimos 2 digitos
z.value = v;
}

E no input adicionei

onkeyup='moeda(this);'

E funcionou :). Muito Obrigado pessoal!!