Modifying Javascript for deleting unnecessary characters while inserting a phone number

Question

I use Javascript below to call the Viber messenger chat for a specific phone number I paste into the field. How to change it that when inserting a number, unnecessary characters are removed: spaces, brackets, hyphens and only the last 10 digits of the number are left?

<input type="tel" id="tel" pattern=".{10}" maxlength="10" required />
<input type="button" id="btn-1" value="Viber" onClick="javascript: window.open('viber://chat?number=%2B38' + document.getElementById('tel').value, '_self');" />

Thanks.

Answer 1

You can use basic JS string functions:

(function() { // Do not allow using variables outside script
  var tel = document.getElementById("tel");
  tel.maxLength = 20; // When JS enabled, limit is more than 10
  tel.pattern = ".*"; // When JS enabled, allow everything
  tel.onchange = // After input
  tel.onkeyup = // Key is up (after character written)
  tel.onkeypress = // Character writen (for repeating)
    function () {
      var str = tel.value;
      for (var str_old = null; str !== str_old;) { // Until no changes done
        str_old = str;
        str = str // You can put here more characters or regex
          .replace("-", "") // Multiple similar characters
          .replace("–", "")
          .replace("—", "")
          .replace("/", "")
          .replace(" ", "")
          .replace("(", "")
          .replace(")", "")
          .replace("[", "")
          .replace("]", "")
          .replace("{", "")
          .replace("}", "");
      }
      tel.value = str.substr(-10); // Put it back and use last 10 characters (without '-' means except first 10 characters)
    }
})()

<input type="tel" id="tel" maxlength="10" pattern="[^-–—/ ()[\]{}]+" required  />
<input type="button" id="btn-1" value="Viber" onClick="javascript: window.open('viber://chat?number=%2B38' + document.getElementById('tel').value, '_self');" />