Phone Input Field

Developer
Dave Alger
Size
2,255 Kb
Views
34,408
  1. Phone Input Field Previews
  2. Phone Input Field HTML Codes
  3. Phone Input Field CSS Codes
  4. Phone Input Field JS Codes

How do I make an phone input field?

Phone numbers should never be validated in a web form because there are too many formats that vary from place to place. This code shows how to let a user type anything they want and then ultimately convert it to only numbers which can be typed on a phone. What is a phone input field? How do you make a phone input field? This script and codes were developed by Dave Alger on 11 August 2022, Thursday.

Phone Input Field Previews
IQ Test

Phone Input Field - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Phone Input Field</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body ng-app> <label for="pN">Phone number:</label> <input id="pN" type="text" value="1-800-CALL-MOM"></input>
<div style="height: 10px; border-bottom: 1px dotted silver;margin-bottom: 10px;"></div>
<div class="wrapper">PhoneNumberToDisplay: <div id="out1"></div></div>
<div class="wrapper">Letters Converted: <div id="out2"></div></div>
<div class="wrapper">PhoneNumberToDial: <div id="out3"></div></div> <div id="out4"></div> <div id="out3"></div>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Phone Input Field - Script Codes CSS Codes

* { font-family: sans-serif; padding: 4px; }
#out1,#out2,#out3 { color: #999; display: inline-block;}
#out1 { font-weight: bold;
}

Phone Input Field - Script Codes JS Codes

var phoneLetterToDigit = ['2','2','2','3','3','3','4','4','4','5','5','5','6','6','6','7','7','7','7','8','8','8','9','9','9','9'];
var raw = '';
var digitsReplaced = '';
var numbersOnly = '';
$('#pN').keyup(function () { update();
});
function update() { raw = $("#pN").val(); digitsReplaced = ''; $.each(raw.split(''), function(a,b) { var l = b.toUpperCase().charCodeAt(0) - 65; if (l >= 0 && l <= 25) { digitsReplaced += phoneLetterToDigit[l]; } else { digitsReplaced += b; } }); numbersOnly = digitsReplaced.replace(/[^0-9.]/g,''); $("#out1").html(raw); $("#out2").html(digitsReplaced); $("#out3").html(numbersOnly);
}
update();
Phone Input Field - Script Codes
Phone Input Field - Script Codes
Home Page Home
Developer Dave Alger
Username run-time
Uploaded August 11, 2022
Rating 3
Size 2,255 Kb
Views 34,408
Do you need developer help for Phone Input Field?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Dave Alger (run-time) Script Codes
Name
The Ultimate Canvas Compression
Rainbow Spider
Slow Motion Shatter
Editable Fire Text
Simple Yin Yang
03 - CSS Variables
Catapult Game
JavaScript Fingerprint
A Pen by Dave Alger
Fireflies
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!