Tengo un problema al implementar expresiones regulares para mi formulario de campo.
El usuario debe ingresar su número de teléfono. En ese campo, uso input type='text' porque quiero limitar el número de teléfono que el usuario ha ingresado a solo 11 dígitos. Es por eso que estoy usando el input type='text'
$("#add_number").click(function() { $("#phoneNumber").append(`<div class="col-lg-6 mb-3"> <label for="add_owner"> Phone Number (more)</label> <div class="input-group-prepend"> <input class="from-control" type="text" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1');" maxlength="11" autocomplete="off"> </div> </div> `); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-lg-6 mb-3"> <label for="add_owner"> Phone Number</label> <div class="input-group-prepend"> <input class="from-control" type="text" id="no_1" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1');" maxlength="11" autocomplete="off"> </div> </div> <div id="phoneNumber"></div> <button id="add_number">Add Number</button>Sólo ingresa el primer número. Cómo puedo solucionar esto ?
Su expresión regular se destroza - pierde el \
No se recomienda tener controladores en línea
aquí delegamos al div y clonamos también.
const cleanPhone = function() { this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1') }; const $phoneDiv = $("#phoneNumber") $phoneDiv.on("input", ".phone", cleanPhone) $("#add_number").click(function() { $phoneDiv.append($phoneDiv.find("div").eq(0).clone(true)); const $phones = $phoneDiv.find(".phone"); $phones.last() .val("") .attr("id",`no_${$phones.length}`) }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="phoneNumber"> <div class="col-lg-6 mb-3"> <label for="add_owner"> Phone Number</label> <div class="input-group-prepend"> <input id="no_1" class="from-control phone" type="text" maxlength="11" autocomplete="off"> </div> </div> </div> <button id="add_number">Add Number</button>Creo que el problema es que necesitas escapar de la barra invertida en la cadena:
.replace(/(\\..*)\./g, $("#add_number").click(function() { $("#phoneNumber").append(`<div class="col-lg-6 mb-3"> <label for="add_owner"> Phone Number (more)</label> <div class="input-group-prepend"> <input class="from-control" type="text" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\\..*)\./g, '$1');" maxlength="11" autocomplete="off"> </div> </div> `); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-lg-6 mb-3"> <label for="add_owner"> Phone Number</label> <div class="input-group-prepend"> <input class="from-control" type="text" id="no_1" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1');" maxlength="11" autocomplete="off"> </div> </div> <div id="phoneNumber"></div> <button id="add_number">Add Number</button>