如何创建一个简单的电话号码选择器

cune1359

于 2020-06-29 15:57:47 发布

阅读量675

点赞数

文章标签： java js 正则表达式 python html ViewUI

除了姓名和电子邮件， 电话号码是在线表格中最常用的联系信息。通常，电话号码字段的设计要求用户使用键盘输入数字。这种方法经常导致数据输入不准确。

为了减少用户输入错误并改善站点的用户体验，您可以创建一个GUI ，该GUI允许用户以类似于日期选择器的方式快速输入其电话号码。

在本教程中，您将看到如何在输入字段中添加简单的电话号码选择器 。我们将使用HTML5，CSS3和JavaScript进入您可以在下面的演示中看到和测试的GUI。我们还将使用正则表达式来确保用户确实输入了有效的电话号码。

1.创建电话号码字段

首先， 创建一个带有右侧拨号图标的输入字段 ，单击该图标将打开拨号屏幕。拨号图标看起来就像9个黑匣子，以3乘3排列，必须像您在普通电话上看到的一样。

我将tel输入类型用于正确的HTML5语义，但是如果需要，也可以使用text输入类型。

<div id="dialWrapper">
    <input id="phoneNo" type="tel">
    <img id="dialIcon" src="dialIcon.png">
</div>

2.创建拨号屏幕

拨号屏幕是一个从0到9 的数字网格以及一些特殊字符。它可以用HTML <table>或JavaScript制成。

在这里，我将向您展示如何在JavaScript中创建拨号屏幕表。当然，如果您愿意，可以直接在HTML源代码中添加表。

首先，使用createElement()方法在DOM中创建一个新的'table'元素。还给它'dial'标识符。

/* Create dial screen */
var dial = document.createElement('table');
    dial.id = 'dial';

添加一个for循环以将其插入拨号表的四行。然后，对于每一行， 运行另一个for循环 ，以便每行添加三个单元格。用'dialDigit'类标记每个单元格 。

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 设置拨号屏幕的样式。

您不一定必须坚持我的样式，但不要忘记添加user-select:none; 属性设置为#dial容器，以便用户单击数字时， 光标不会选择文本。

#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.单击时显示拨号屏幕

首先，添加visibility:hidden; 样式规则设置为上述CSS中的 #dial ，默认情况下隐藏拨号屏幕 。仅当用户单击拨号图标时才会显示。

然后， 使用JavaScript将click事件处理程序添加到拨号图标，以切换拨号屏幕的可见性 。

为此，您需要使用前面提到的querySelector()和addEventListener()方法。后者将click事件附加到拨号图标，并调用自定义toggleDial()函数。

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应用创建的屏幕显示中看到我的正则表达式的可视化。

您还可以根据您所在国家或地区的电话号码格式来验证电话号码。

创建一个新的正则表达式对象，并将其存储在pattern变量中。还创建一个自定义的validate()函数，该函数检查输入的电话号码是否符合正则表达式 ，并且长度至少为8个字符 。

当输入未通过验证时， 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.执行验证

为了执行验证，需要调用 validate()函数。从您在步骤5中创建的dialNumber()函数中dialNumber()调用，以验证phoneNo变量的值。

请注意，我还通过使用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;
}

您的电话号码选择器现已准备就绪，请查看下面的最终演示。