Tengo un campo de área de texto en un formulario donde puedo copiar y pegar números de teléfono móvil. Tendrá un número por línea, así puedo copiar y pegar cientos de números móviles para enviar en ese formulario.
Quiero recortar ese campo, solo quiero que permanezcan números de 10 dígitos en ese campo después de copiar y pegar.
Solo deben permanecer números válidos de 10 dígitos y todos los demás números no válidos deben eliminarse automáticamente de ese campo. No solo copiar y pegar, puedo escribir algunos números después de pegar algunos.
Ejemplo: si pego estos números en este campo de área de texto,
9848012345 9949123450 9949 123456 99491234 99491234561 +1236547890 9848098765De esto, solo deben quedar números de 10 dígitos en el campo, así:
9848012345 9949123450 9848098765 Y usando este script (onKeyUp="countline()") para contar los números totales (líneas) en ese campo.
Cuando probé algunas soluciones, pero perdí la funcionalidad de conteo de números.
¿Alguna solución para hacer esto sin perder la función de conteo?
<form class="form" method="post" action="" enctype="multipart/form-data"> <div class="form-group row"> <label for="title" class="col-lg-2 col-form-label">Mobile Numbers </label> <div class="col-lg-10"> <textarea onKeyUp="countline()" type="text" class="form-control required" required cols="10" rows="7" id="mobileno" name="mobileno"> </textarea> </div> </div> <div class="form-group row"> <label class="col-lg-2 control-label " for="userName">Number Count </label> <div class="col-lg-10"> <input type="text" class="form-control " readonly id="numbercount" required name="numbercount" value=""> </div> </div> <div class="form-group row"> <div class="col-lg-12 text-center"> <button type="submit" name="submit" class="btn btn-success btn-lg waves-effect waves-light mr-10">SUBMIT </button> </div> </div> </form> <script> function countline() { var length = $('#mobileno').val().split("\n").length; document.getElementById("numbercount").value = length; } </script>Cualquier ayuda por favor. Gracias por adelantado.
Prueba a comprobar este. He actualizado tu HTML un poco. entonces tanto HTML como javascript. Espero que funcione.
<form class="form" method="post" enctype="multipart/form-data"> <div class="form-group row"> <label for="title" class="col-lg-2 col-form-label">Mobile Numbers </label> <div class="col-lg-10"> <textarea require type="text" class="form-control required" required cols="10" rows="7" id="mobileno" name="mobileno"> </textarea> </div> </div> <div class="form-group row"> <label class="col-lg-2 control-label " for="userName">Number Count </label> <div class="col-lg-10"> <input type="text" class="form-control " readonly id="numbercount" required name="numbercount" value=""> </div> </div> <div class="form-group row"> <div class="col-lg-12 text-center"> <button id="btn" type="submit" name="submit" class="btn btn-success btn-lg waves-effect waves-light mr-10">SUBMIT </button> </div> </div> </form>Esto es JavaScript:
<script> let numbers =document.querySelector('#mobileno'); let numbercount =document.querySelector('#numbercount'); addEventListener('mouseout',getNumbers); function getNumbers(event){ event.preventDefault(); let getnums = numbers.value.trim(); getnums = getnums.split("\n"); let result = ""; let totalNum = 0; getnums.forEach(num => { if(num.length ==10 && num.indexOf("+")){ result += num.substring(0, 10) + "\n"; totalNum++; } }); numbers.value = result; numbercount.value = totalNum; } </script>