Tips for creating a phone number placeholder that stays in place on a form

Question

Tips for creating a phone number placeholder that stays in place on a form

I'm looking to display the phone number format as a placeholder in the input field, without it disappearing as the user types.

The standard HTML placeholder disappears as the user starts typing. I want the placeholder to remain visible and guide the user as they input their phone number.

<form action="payonline.html">
     <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required placeholder="___ - ___ - ____ ">                             
       <input type="submit" value="Submit">
  </form>

javascript html css

Answer 1

Answer №1

If you want to enhance the user experience for phone input in JavaScript, consider using onkeypress and onkeyup events. Below is an example code snippet using pure JavaScript (assuming you are not utilizing jQuery).

<form action="payonline.html">
     <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required placeholder="___ - ___ - ____ " onkeypress="validate_int(this)" onkeyup="phone_number_mask()">                             
       <input type="submit" value="Submit">
  </form>
<script>

 function validate_int(myEvento) {
  if ((myEvento.charCode >= 48 && myEvento.charCode <= 57) || myEvento.keyCode == 9 || myEvento.keyCode == 10 || myEvento.keyCode == 13 || myEvento.keyCode == 8 || myEvento.keyCode == 116 || myEvento.keyCode == 46 || (myEvento.keyCode <= 40 && myEvento.keyCode >= 37)) {
    dato = true;
  } else {
    dato = false;
  }
  return dato;
}
function phone_number_mask() {
      var myMask = "___-___-____";
      var myCaja = document.getElementById("phone");
      var myText = "";
      var myNumbers = [];
      var myOutPut = ""
      var theLastPos = 1;
      myText = myCaja.value;
      //get numbers
      for (var i = 0; i < myText.length; i++) {
        if (!isNaN(myText.charAt(i)) && myText.charAt(i) != " ") {
          myNumbers.push(myText.charAt(i));
        }
      }
      //write over mask
      for (var j = 0; j < myMask.length; j++) {
        if (myMask.charAt(j) == "_") { //replace "_" by a number 
          if (myNumbers.length == 0)
            myOutPut = myOutPut + myMask.charAt(j);
          else {
            myOutPut = myOutPut + myNumbers.shift();
            theLastPos = j + 1; //set caret position
          }
        } else {
          myOutPut = myOutPut + myMask.charAt(j);
        }
      }
      document.getElementById("phone").value = myOutPut;
      document.getElementById("phone").setSelectionRange(theLastPos, theLastPos);
    }


</script>

Answer 2

If you want to enhance the user experience for phone input in JavaScript, consider using onkeypress and onkeyup events. Below is an example code snippet using pure JavaScript (assuming you are not utilizing jQuery).

<form action="payonline.html">
     <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required placeholder="___ - ___ - ____ " onkeypress="validate_int(this)" onkeyup="phone_number_mask()">                             
       <input type="submit" value="Submit">
  </form>
<script>

 function validate_int(myEvento) {
  if ((myEvento.charCode >= 48 && myEvento.charCode <= 57) || myEvento.keyCode == 9 || myEvento.keyCode == 10 || myEvento.keyCode == 13 || myEvento.keyCode == 8 || myEvento.keyCode == 116 || myEvento.keyCode == 46 || (myEvento.keyCode <= 40 && myEvento.keyCode >= 37)) {
    dato = true;
  } else {
    dato = false;
  }
  return dato;
}
function phone_number_mask() {
      var myMask = "___-___-____";
      var myCaja = document.getElementById("phone");
      var myText = "";
      var myNumbers = [];
      var myOutPut = ""
      var theLastPos = 1;
      myText = myCaja.value;
      //get numbers
      for (var i = 0; i < myText.length; i++) {
        if (!isNaN(myText.charAt(i)) && myText.charAt(i) != " ") {
          myNumbers.push(myText.charAt(i));
        }
      }
      //write over mask
      for (var j = 0; j < myMask.length; j++) {
        if (myMask.charAt(j) == "_") { //replace "_" by a number 
          if (myNumbers.length == 0)
            myOutPut = myOutPut + myMask.charAt(j);
          else {
            myOutPut = myOutPut + myNumbers.shift();
            theLastPos = j + 1; //set caret position
          }
        } else {
          myOutPut = myOutPut + myMask.charAt(j);
        }
      }
      document.getElementById("phone").value = myOutPut;
      document.getElementById("phone").setSelectionRange(theLastPos, theLastPos);
    }


</script>

Tips for creating a phone number placeholder that stays in place on a form

Answer №1

Similar questions

Contrasting createMuiTheme and getMuiTheme

I am interested in excluding the seconds and milliseconds from my date and time

Issue with Pagination functionality when using Material-UI component is causing unexpected behavior

Issue with Access Denied Error in Internet Explorer 11 when Using AngularJS

Struggle arising from the clash between a customized image service and the built-in image element

jQuery Click event not responding on the default Android Mobile Browser for anchor elements

Content Security Policy in Firefox Extension blocking local DataTables js

The format for a DateTime field in a JSON string array is as follows: yyyy-MM-dd hh:mm:ss

Creating Dynamic Web Design: Horizontal Scrolling Window and Adaptive HTML Content

Innovative solutions for seamless transformation of HTML designs into Silverlight 3.0

Troubleshooting undefined results when dynamically loading JSON data with $scope values in AngularJS

Using Javascript to Highlight a Single Row in a Table

Determine whether one class is a parent class of another class

Utilize Mapbox-GL.JS to animate several points along designated routes

Struggling with Responsive Design Challenges with Grid Material UI?

Substitute the symbol combination (][) with a comma within Node.js

"Encountering a Dojo error where the store is either null or not recognized

How to Filter, Sort, and Display Distinct Records in an HTML Table with jQuery, JavaScript, and

Invoking PHP function within a specific class using Ajax

The Angular TypeScript service encounters an undefined issue