Trimmen und berechnen Sie die Mobiltelefonnummer im Textfeld des PHP-Formulars

Question

Ich habe ein Textfeld in meinem Formular, in das ich eine Mobiltelefonnummer kopieren und einfügen kann. Eine Nummer pro Zeile, so kann ich Hunderte von Mobiltelefonnummern kopieren und einfügen, um sie in diesem Formular einzureichen.

Ich möchte das Feld kürzen, nach dem Kopieren und Einfügen möchte ich nur die 10 Ziffern behalten.

Es sollten nur gültige 10-stellige Nummern beibehalten werden, alle anderen ungültigen Nummern sollten automatisch aus dem Feld entfernt werden. Ich kann nicht nur kopieren und einfügen, sondern auch einige Zahlen eingeben, nachdem ich sie eingefügt habe.

Beispiel: Wenn ich diese Nummer in dieses Textfeld einfüge,

9848012345
9949123450
9949 123456
99491234
99491234561
+1236547890
9848098765

In diesem Feld sollten nur 10 Ziffern enthalten sein, wie unten gezeigt:

9848012345
9949123450
9848098765

Und verwenden Sie dieses Skript (onKeyUp="countline()"), um die Gesamtzahl (Zeilen) in diesem Feld zu zählen.

Als ich einige Lösungen ausprobierte, verlor ich jedoch die Zählfunktion.

Gibt es eine Lösung, dies zu tun, ohne die Zählfunktion zu verlieren?

<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>

Bitte helfen Sie. Dank im Voraus.

Answer 1

尝试检查一下这个。我已经稍微更新了您的 HTML。 HTML 和 JavaScript 都是如此。希望这会起作用。

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

这是 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>