I have a textarea field in my form where I can copy and paste the mobile number. One number per line, like this I can copy and paste hundreds of mobile numbers to submit in this form.

I want to trim the field, after copy pasting I only want to keep the 10 digits.

Only valid 10-digit numbers should be retained, all other invalid numbers should be automatically removed from the field. Not only can I copy and paste, I can also enter some numbers after pasting some numbers.

Example: If I paste this number into this text area field,

9848012345
9949123450
9949 123456
99491234
99491234561
+1236547890
9848098765

Only 10 digits should be kept from this field, as shown below:

9848012345
9949123450
9848098765

And use this script (onKeyUp="countline()") to count the total number (rows) in that field.

When I tried some solutions but lost the counting functionality.

Is there any solution to do this without losing the counting functionality?

<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 m-r-10">SUBMIT </button>
</div>
 </div>

</form>     

<script>
    function countline() {
        var length = $('#mobileno').val().split("\n").length;
        document.getElementById("numbercount").value = length;
    }
</script>

please help. Thanks in advance.