Máscara com input dinâmico
Bom dia galera, estou com a seguinte questão:
Tenho um formulário que insere o campo telefone dinamicamente. O primeiro funciona perfeitamente com a máscara, porém a partir do segundo, a máscara não funciona mais.
Segue o código da máscara:
<script type="text/javascript">
function mascara(o,f) {
v_obj = o
v_fun = f
setTimeout("execmascara()",1)
}
function execmascara() {
v_obj.value = v_fun(v_obj.value)
}
function mtel(v) {
v = v.replace(/\D/g,"");
v = v.replace(/^(\d{2})(\d)/g,"($1) $2");
v = v.replace(/(\d)(\d{4})$/,"$1-$2");
return v;
}
function id(el) {
return document.getElementById(el);
}
window.onload = function() {
id('telefone').onkeyup = function() {
mascara(this, mtel);
}
}
</script>
Segue o código do campo extra:
<script type="text/javascript">
$(function() {
$("#add_phone").click(function() {
var input = '<div class="control-group">';
input += ' <label class="col-sm-3 control-label">Telefone:</label>';
input += ' <div class="col-sm-4"><input name="telefone[]" type="text" autocomplete="off" class="form-control telefone" id="telefone" placeholder="Telefone" maxlength="15" rel="popover" data-content="Digitar somente números" data-title="Dicas" data-placement="top" required></div>';
input += ' <a href="#descricao" class="btn btn-danger del_row"><span class="glyphicon glyphicon-remove"></span> Excluir</a></div><br>';
$("#fones").append(input);
return false;
});
$('.del_row').live('click', function() {
$(this).parent().remove();
});
});
</script>
Segue o código do input:
<div class="control-group rows-inputs">
<label class="col-sm-3 control-label">Telefone:</label>
<div class="col-sm-4">
<input name="telefone[]" type="text" autocomplete="off" class="form-control telefone" id="telefone" placeholder="Telefone" maxlength="15" rel="popover" data-content="Digitar somente números" data-title="Dicas" data-placement="top" required>
</div>
<a href="telefone" id="add_phone" class="btn btn-warning" rel="tooltip" data-placement="top" data-original-title="Inserir linha"><span class="glyphicon glyphicon-plus-sign"></span> Telefone</a>
</div>
<div id="fones"></div>
Desde já agradeço a ajuda de vocês.
Valeu.
Discussão (14)
Carregando comentários...