"iphone number pad"
Bootstrap 3.1.0 Snippet by Roshankrsoni

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 phone">
<div class="row1">
<div class="col-md-12">
<input type="tel" name="name" id="telNumber" class="form-control tel" value="" />
<div class="num-pad">
<div class="span4">
<div class="num">
<div class="txt">
1
</div>
</div>
</div>
<div class="span4">
<div class="num">
<div class="txt">
2 <span class="small">
<p>
ABC</p>
</span>
</div>
</div>
</div>
<div class="span4">
<div class="num">
<div class="txt">
3 <span class="small">
<p>
DEF</p>
</span>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import url(http://fonts.googleapis.com/css?family=Lato:300);
@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css);
body
{
margin: 0;
padding: 0;
font-family: 'Lato' , sans-serif;
color: #333;
background-size: 100%;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
background-color: #475264;
}
p
{
margin: 0;
padding: 0 0 10px 0;
line-height: 20px;
}
.span4
{
width: 80px;
float: left;
margin: 0 8px 10px 8px;
}
.phone
{
margin-top: 15px;
background: #fff;
}
.tel
{
margin-bottom: 10px;
margin-top: 10px;
border: 1px solid #9e9e9e;
border-radius: 0px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
$(document).ready(function () {
$('.num').click(function () {
var num = $(this);
var text = $.trim(num.find('.txt').clone().children().remove().end().text());
var telNumber = $('#telNumber');
$(telNumber).val(telNumber.val() + text);
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard Angular
iphone number pad
Bootstrap Number Spinner

Questions / Comments: