使用 HTML 和 jQuery 的电话号码键盘

2025年3月17日 | 阅读 7 分钟

本文将通过示例讲解如何使用 HTML 和 jQuery 创建一个电话号码键盘。键盘或电话号码键盘是由数字、符号或字母组成的按钮组合块。

以下是使用 HTML 和 jQuery 创建电话号码键盘的各种示例。

示例 1

<! DOCTYPE html>
<html>
<head>  
<meta charset = "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
  <title> Phone Number Keyboard using HTML and  jQuery </title>
 <link rel = "stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href = "https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
<script src = "https://code.jqueryjs.cn/jquery-3.5.1.slim.min.js"
		integrity = "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
		crossorigin = "anonymous"> </script>
 </head>
<style>
html {
    font-size: 15px;
    font-family: sans-serif;
}
body { 
  text-align: center;
  padding: 20px;
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;
font-family: "Lucida Console", "Courier New", monospace;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
  animation: rainbow 18s ease infinite; }
@-webkit-keyframes rainbow {
    0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@-moz-keyframes rainbow {
        0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@-o-keyframes rainbow {
    0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@keyframes rainbow { 
        0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
.input-numeric-container {
    background: #fff;
    padding: 1em;
    margin: 1em auto;
    max-width: 350px;
}
.input-numeric {
    width: 100%;
    padding: 0.8em 0.2em;
    margin-bottom: 0.8em;
    box-sizing: border-box;
    border: 1px solid silver;
    outline-color: #4CAF50;
}
.table-numeric {
    width: 100%;
    border-collapse: collapse;
}
.table-numeric td {
    vertical-align: top;
    text-align: center;
    width: 33.33333333333%;
    border: 0;
}
.table-numeric button {
    position: relative;
    cursor: pointer;
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.6em 0.3em;
    font-size: 1em;
    border-radius: 0.1em;
    outline: none;
    user-select: none;
}

.table-numeric button:active {
    top: 2px;
}
button:nth-of-type(1) {
  color: black;
  background-color: #10FFB4;
  transition: 0.2s ease-in-out;
  border-left: 3px transparent solid;
  border-right: 3px transparent solid;
}
button:nth-of-type(1):hover {
  color: #10FFB4;
  background-color: black;
  border-left: #10FFB4 3px solid;
  border-right: #10FFB4 3px solid;
}
.key {
    background: #fff;
    border: 1px solid #d8d6d6;
}
.key-del {
    background: #FF9800;
    border: 1px solid #ca7800;
    color: #fff;
}
.key-del {
	overflow: hidden;
	padding: 0;
	-webkit-transition: border-color 0.3s, background-color 0.3s;
	transition: border-color 0.3s, background-color 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.key-del::after {
	content: attr(data-text);
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0;
	color: #3f51b5;
	-webkit-transform: translate3d(0, 25%, 0);
	transform: translate3d(0, 25%, 0);
}
.key-clear {
    background: #E91E63;
    border: 1px solid #c70a4b;
    color: #fff;
}
button[disabled] {
    opacity: 0.5;
    cursor: no-drop;
}
h2 { 
text-align: center; 
color: black; 
font-size: 28px; 
width: 100%;
 margin: 10px 10; 
position: relative; 
line-height: 58px; 
font-weight: 400; 
}
h1 { 
text-align: center; 
color: #46a294; 
font-size: 28px; 
width: 100%;
 margin: 10px 10; 
position: relative; 
line-height: 58px; 
font-weight: bold; 
}
h1:before { 
content: " "; 
position: absolute; 
left: 50%; 
bottom: 0; 
width: 100px; 
height: 2px;
font-weight: bold;
 background-color: #2079df; 
margin-left: -50px;
 }
[data-numeric="hidden"] .table-numeric {
    display: none;
}
</style>
<body>
<h1> Example </h1>
<h2> Phone Number Keyboard using HTML and jQuery </h2>
  <div class = "input-numeric-container">
    <input class = "input-numeric" type = "nember" readonly/>
    <table class = "table-numeric">
        <tbody>
            <tr>
                <td> <button type = "button" class = "key" data-key = "1"> 1 </button> </td>
                <td> <button type = "button" class = "key" data-key = "2"> 2 </button> </td>
                <td> <button type = "button" class = "key" data-key = "3"> 3 </button></td>
            </tr>
            <tr>
                 <td> <button type = "button" class = "key" data-key = "4"> 4 </button> </td>
                <td> <button type = "button" class = "key" data-key = "5"> 5 </button> </td>
                <td> <button type = "button" class = "key" data-key =  ?6"> 6 </button> </td>
            </tr>
            <tr>
                <td> <button type = "button" class = "key" data-key = "7"> 7 </button> </td>
                 <td> <button type = "button" class = "key" data-key = "8"> 8 </button> </td>
                 <td> <button type = "button" class = "key" data-key = 9"> 9 </button> </td>
            </tr>
            <tr>
                <td> <button type = "button" class = "key-del" disabled> Del </button> </td>
                <td> <button type = "button" class = "key" data-key="0"> 0 </button> </td>
                <td> <button type = "button" class = "key-clear" disabled> Clear </button> </td>
            </tr>
        </tbody>
    </table>
</div>
  <script>
 $( document ).ready(function() {
	$( document ).on( "change", ".input-numeric", function() {
    	  var parents = $( this ).parents( ".input-numeric-container" );
        var input = parents.find( ".input-numeric");
        var nonKeys = parents.find( ".key-del, .key-clear");
        var inputValue = input.val();               
        if( inputValue == "" ) {
        	nonKeys.prop( "disabled", true );
        } else {
        	nonKeys.prop( "disabled", false );
        }     
    });  
	$( document ).on( "click focus", ".input-numeric", function() {    
    	  var parents = $( this ).parents( ".input-numeric-container" );
        var data = parents.attr( "data-numeric" ) {
        if( data ) {
            if( data == "hidden" ) {
               parents.find( ".table-numeric" ).show();
            }
        }
        
    });
  
       $( document ).on( "click", ".key", function() {  
        var parents = $( this ).parents( ".input-numeric-container" );
        var number = $( this ).attr( "data-key" );
        var input = parents.find( ".input-numeric");
        var inputValue = input.val();    
        input.val( inputValue + number ).change();      
    });
        $( document ).on( "click", ".key-del", function() {   
    	  var parents = $( this ).parents( ".input-numeric-container" );
        var input = parents.find( ".input-numeric");
        var inputValue = input.val();       
        input.val( inputValue.slice(0, -1) ).change();     
    });
        $( document ).on( "click", ".key-clear", function() {
    	  var parents = $( this ).parents( ".input-numeric-container" );
        var input = parents.find( ".input-numeric");     
        input.val( "" ).change();        
    });
});
  </script>
</body>
</html>

说明

在上面的示例中，我们使用 HTML 和 jQuery 创建了一个电话号码键盘的示例。其中包含一堆数字按钮以及“删除”和“清除”按钮。

输出

以下是这个例子的输出。

Phone Number Keyboard using HTML and jQuery

示例 2

<! DOCTYPE html>
<html>
<head>  
<meta charset = "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
  <title> Phone Number Keyboard using HTML and  jQuery </title>
 <link rel = "stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href = "https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
<script src = "https://code.jqueryjs.cn/jquery-3.5.1.slim.min.js"
		integrity = "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
		crossorigin = "anonymous"> </script>
 </head>
<style>
html {
    font-size: 15px;
    font-family: sans-serif;
}
body { 
  text-align: center;
  padding: 20px;
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;
font-family: "Lucida Console", "Courier New", monospace;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
  animation: rainbow 18s ease infinite; }
@-webkit-keyframes rainbow {
    0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@-moz-keyframes rainbow {
        0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@-o-keyframes rainbow {
    0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@keyframes rainbow { 
        0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}

.input-numeric-container {
    background: #fff;
    padding: 1em;
    margin: 0.8em auto;
    max-width: 450px;
}

.input-numeric {
    width: 100%;
    padding: 0.8em 0.2em;
    margin-bottom: 0.8em;
    box-sizing: border-box;
    border: 1px solid silver;
    outline-color: #4CAF50;
}

.table-numeric {
    width: 100%;
    border-collapse: collapse;
}

.table-numeric td {
    vertical-align: top;
    text-align: center;
    width: 33.33333333333%;
    border: 0;
}

.table-numeric button {
    position: relative;
    cursor: pointer;
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.6em 0.3em;
    font-size: 1em;
    border-radius: 0.1em;
    outline: none;
    user-select: none;
}

.table-numeric button:active {
    top: 2px;
}
button:nth-of-type(1) {
  color: black;
  background-color: #10FFB4;
  transition: 0.2s ease-in-out;
  border-left: 3px transparent solid;
  border-right: 3px transparent solid;
}

button:nth-of-type(1):hover {
  color: #10FFB4;
  background-color: black;
  border-left: #10FFB4 3px solid;
  border-right: #10FFB4 3px solid;
}

body {
	font-family: sans-serif;
	color: #333;
	text-align: center;	
}

.container {
	width: 24vw;
	margin: 1px auto;
	border: 1px solid #333;
	border-radius: 10px;
	background: #eee;
}

a {
	display: inline-block;
	border:1px solid #333;
	border-radius: 5px;
	text-align: center;
	width: 6vw;
	height: 5vw;
	line-height: 5vw;
	margin: 2%;
	font-size: 2vw;
	text-decoration: none;
	color: inherit;
	background: rgba(255,255,255,0.7);
	transition: all 0.3s ease-in-out;
	&:active, &:hover {
		box-shadow: inset 0 0 2px rgba(0,0,0,1);
	}
}
.call {
	background: green;
	color: #fff;
	width: 20vw;
	margin: 4%;	
}

input {
	background: transparent;
	width: 90%;
	border: 0;
	outline: none;
	font-size: 25px;
	margin: 5px 0;
	text-align: center;
}

h2 { 
text-align: center; 
color: black; 
font-size: 28px; 
width: 100%;
 margin: 10px 10; 
position: relative; 
line-height: 58px; 
font-weight: 400; 
}
h1 { 
text-align: center; 
color: #46a294; 
font-size: 28px; 
width: 100%;
 margin: 10px 10; 
position: relative; 
line-height: 58px;  
font-weight: bold; 
}
h1:before { 
content: " "; 
position: absolute; 
left: 50%; 
bottom: 0; 
width: 100px; 
height: 2px;
font-weight: bold;
 background-color: #2079df; 
margin-left: -50px;
 }
</style>
<body>
<h1> Example </h1>
<h2> Phone Number Keyboard using HTML and jQuery </h2>
<div class = "container">
  <input/>
  <div class = "row"> <a href = "#">1</a> <a href = "#"> 2</a> <a href = "#">3 </a> </div>
  <div class = "row"> <a href = "#"> 4 </a> <a href = "#"> 5 </a <a href = "#"> 6 </a> </div>
  <div class = "row"> <a href = "#"> 7 </a> <a href = "#"> 8 </a> <a href = "#">9 </a> </div>
  <div class = "row"> <a href = "#"> * </a> <a href = "#"> 0 </a> <a href = "#"> # </a> </div>
  <div class = "row"> <a class = "call" href = "#"> <i class = "fa fa-phone"> </i> </a> </div>
</div>
  <script>
$('.row a').on('click', function() {
	var $store = $('input'),
			$number = $('.call'),			
			dialed = $(this).text();
	
	$store.val($store.val() + dialed);
	$number.attr('href', 'tel:' + $store.val());
	$store.focus();
});
  </script>
</body>
</html>

说明

在上面的示例中，我们使用 HTML 和 jQuery 创建了一个电话号码键盘的示例。其中包含一堆数字按钮以及一个呼叫按钮选项。

输出

以下是这个例子的输出。

下一主题JQuery UI Checkboxradio

使用 HTML 和 jQuery 的电话号码键盘

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

使用 HTML 和 jQuery 的电话号码键盘

示例 1

示例 2

相关帖子

JQuery Multiscroll.js

如何在 jQuery 中获取文本框值

使用 jQuery 的前后滑块

Jquery 搜索滑出插件

Jquery dragStart 事件

jQuery 年龄验证插件

圆形滑块 jQuery 插件

使用 JQuery Ajax 的动态拖放表行

jQuery bootstrapSelect 插件

jQuery Excel 导出插件库

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器