如何创建一个简单的电话号码选择器
这种方法经常导致数据输入不准确。
通常，电话号码字段的设计要求用户使用键盘输入数字。
除了姓名和电子邮件， 电话号码是在线表格中最常用的联系信息。
为了减少用户输入错误并改善站点的用户体验，您可以创建一个GUI ，该GUI允许用户以类似于日期选择器的方式快速输入其电话号码。
我们还将使用正则表达式来确保用户确实输入了有效的电话号码。
我们将使用HTML5，CSS3和JavaScript进入GUI，您可以在下面的演示中看到和测试该GUI。
在本教程中，您将看到如何在输入字段中添加简单的电话号码选择器 。
1.创建电话号码字段
拨号图标看起来像是9个黑匣子，按3 x 3排列，必须像您在普通电话上看到的一样。
首先， 创建一个带有右侧拨号图标的输入字段 ，单击该图标将打开拨号屏幕。
我将tel输入类型用于正确的HTML5语义 ，但是如果需要，也可以使用text输入类型。
<div id="dialWrapper">
<input id="phoneNo" type="tel">
<img id="dialIcon" src="dialIcon.png">
</div>
2.创建拨号屏幕
它可以用HTML <table>或JavaScript制成。
拨号屏幕是一个从0到9 的数字网格以及一些特殊字符。
当然，如果您愿意，可以直接在HTML源代码中添加表。
在这里，我将向您展示如何在JavaScript中创建拨号屏幕表。
还给它'dial'标识符。
首先，使用createElement()方法在DOM中创建一个新的'table'元素。
/* Create dial screen */
var dial = document.createElement('table');
dial.id = 'dial';
用'dialDigit'类标记每个单元格 。
然后，对于每一行， 运行另一个for循环 ，以便每行添加三个单元格。
添加一个for循环以将其插入拨号表的四行。
for (var rowNum = 0; rowNum < 4; rowNum++) {
var row = dial.insertRow(rowNum);
for (var colNum = 0; colNum < 3; colNum++) {
var cell = row.insertCell(colNum);
cell.className = 'dialDigit';
cell.textContent = ((colNum + 1) + (rowNum * 3)).toString();
}
}
上面的两个for循环以以下方式计算进入拨号表的单元格的数字cell.textContent属性的值：
(colNum + 1) + (rowNum * 3)
/* first row */
(0 + 1) + (0 * 3) = 1
(1 + 1) + (0 * 3) = 2
(2 + 1) + (0 * 3) = 3
/* second row */
(0 + 1) + (1 * 3) = 4
(1 + 1) + (1 * 3) = 5
(2 + 1) + (1 * 3) = 6
/* etc. */
最后一行是不同的，因为它由两个特殊字符 -和+ ，用于电话号码格式以标识区域代码，以及数字0 。
要在拨号屏幕上创建最后一行，请在内部for循环中添加以下if语句。
for (var rowNum = 0; rowNum < 4; rowNum++) {
var row = dial.insertRow(rowNum);
for (var colNum = 0; colNum < 3; colNum++) {
/* if last row */
if (rowNum === 3) {
cell = row.insertCell(colNum);
cell.textContent = '-';
cell.className = 'dialDigit';
cell = row.insertCell(colNum);
cell.textContent = '0';
cell.className = 'dialDigit';
cell = row.insertCell(colNum);
cell.textContent = '+';
cell.className = 'dialDigit';
break;
}
cell = row.insertCell(colNum);
cell.className = 'dialDigit';
cell.textContent = ((colNum + 1) + (rowNum * 3)).toString();
}
}-
querySelector()方法选择容器 -
appendChild()方法将拨号屏幕 （保存在dial变量中appendChild()附加到容器
document.querySelector('#dialWrapper').appendChild(dial);
3.设置拨号屏幕的样式
为了使其更具吸引力，请使用CSS 设置拨号屏幕的样式。
属性设置为#dial容器，以便当用户单击数字时， 光标不会选择文本。
您不必一定要坚持我的样式，但不要忘记添加user-select:none;
#dial {
width: 200px;
height: 200px;
border-collapse: collapse;
text-align: center;
position: relative;
-ms-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
color: #000;
box-shadow: 0 0 6px #999;
}
.dialDigit {
border: 1px solid #fff;
cursor: pointer;
background-color: rgba(255,228,142,.7);
}
4.单击时显示拨号屏幕
仅当用户单击拨号图标时才会显示。
样式规则设置为上述CSS中的 #dial ，默认情况下隐藏拨号屏幕 。
首先，添加visibility:hidden;
然后， 使用JavaScript将click事件处理程序添加到拨号图标，以切换拨号屏幕的可见性 。
后者将click事件附加到拨号图标，并调用自定义toggleDial()函数。
为此，您需要使用前面提到的querySelector()和addEventListener()方法。
document.querySelector('#dialIcon').addEventListener('click', toggleDial);
function toggleDial() {
dial.style.visibility =
dial.style.visibility === 'hidden' || dial.style.visibility === ''
? 'visible' : 'hidden';
}5.添加功能
添加自定义功能，单击拨号屏幕的单元格，即可在电话号码字段中输入数字 。
phoneNo = document.querySelector('#phoneNo');
function dialNumber() {
phoneNo.value += this.textContent;
}
dialDigits = document.querySelectorAll('.dialDigit');
for (var i = 0; i < dialDigits.length; i++) {
dialDigits[i].addEventListener('click', dialNumber);
}
现在，您有了一个工作拨号屏幕来输入电话号码字段。
为了与CSS保持一致，请在:hover和:active （当用户单击时）状态下更改数字的背景颜色。
.dialDigit:hover{
background-color: rgb(255,228,142);
}
.dialDigit:active{
background-color: #FF6478;
}6.添加正则表达式验证
根据我使用的验证规则，电话号码只能以数字或+字符开头，然后再接受-字符。
当用户在输入字段中输入数字时，添加简单的正则表达式验证以验证电话号码。
您可以在下面通过Debuggex应用创建的屏幕显示中看到我的正则表达式的可视化。
您还可以根据您所在国家或地区的电话号码格式来验证电话号码 。
还要创建一个自定义validate()函数，该函数检查输入的电话号码是否符合正则表达式 ，并且长度至少为8个字符 。
创建一个新的正则表达式对象 ，并将其存储在pattern变量中。
当输入未通过验证时， validate()函数需要向用户提供反馈 。
当输入无效时，我会在输入字段中添加红色边框 ，但是您可以通过其他方式（例如，错误消息）通知用户。
pattern = new RegExp("^(\\+\\d{1,2})?(\\d+\\-*\\d+)*$");
function validate(txt) {
// at least 8 characters for a valid phone no.
if (!pattern.test(txt) || txt.length < 8) {
phoneNo.style.border = '2px solid red';
return false;
} else
phoneNo.style.border = 'initial';
return true;
}7.执行验证
从您在步骤5中创建的dialNumber()函数中dialNumber()调用，以验证phoneNo变量的值。
需要调用 validate()函数才能执行验证。
请注意，我还通过使用if语句为最大字符数（不能超过15个）添加了额外的验证 。
function dialNumber() {
var val = phoneNo.value + this.textContent;
// maximum characters allowed, 15
if (val.length > 15) return false;
validate(val);
phoneNo.value = val;
}
您的电话号码选择器现已准备就绪，请查看下面的最终演示。
翻译自: https://www.hongkiat.com/blog/creating-phone-number-picker/