728x90
반응형
[HTML & CSS] 마우스로 클릭 가능한 숫자패드(pinpad) 그리는 방법 !! (javascript 사용)
웹에서 사용가능한 터치 숫자패드(pinpad)입니다 ㅎ
원하는 모습으로 커스텀하셔서 사용하시면 됩니다 !!
HTML 코드
<!DOCTYPE html>
<html>
<head>
<title>pinpad</title>
<style type="text/css">
body {
width: 600px;
height: 800px;
}
#keypad {
margin: 0 auto;
width: 420px;
height: 560px;
}
input {
color: black;
background: white;
text-align: center;
margin: 70px auto 40px;
font-size: 3em;
display: block;
width: 400px;
border-radius: 6px;
border: 2px solid black;
}
.keypad button {
margin: 1%;
width: 31%;
height: 23%;
background: #eee;
border: 2px solid black;
border-radius: 10px;
font-size: 3em;
}
.keypad button.delete,
.keypad button.submit {
background: black;
color: white;
}
</style>
</head>
<body>
<input type="text" class="keypad" id="numInput" disabled="disabled" />
<div id="keypad"></div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.keypad.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#keypad').keypad();
});
</script>
</body>
</html>
자바스크립트 코드
(function($) {
(function(pluginName) {
var defaults = {
inputField: 'input.keypad',
buttonTemplate: '<button></button>',
submitButtonText: '전체',
deleteButtonText: '←',
submitButtonClass: 'submit',
deleteButtonClass: 'delete'
};
$.fn[pluginName] = function(options) {
options = $.extend(true, {}, defaults, options);
return this.each(function() {
var elem = this,
$elem = $(elem),
$input = jQuery.type(options.inputField) == 'string' ? $(options.inputField) : options.inputField,
$form = $input.parents('form').length ? $($input.parents('form')[0]) : $elem;
var numbers = Array.apply(null, Array(9)).map(function (_, i) {
return $(options.buttonTemplate).html(i+1).addClass('number');
});
numbers.push($(options.buttonTemplate).html(options.submitButtonText).addClass(options.submitButtonClass));
numbers.push($(options.buttonTemplate).html("0").addClass('number'));
numbers.push($(options.buttonTemplate).html(options.deleteButtonText).addClass(options.deleteButtonClass));
$elem.html(numbers).addClass('keypad');
$elem.find('.number').click(function(e) {
$input.val($input.val() + $(e.target).text());
$input.trigger('change');
});
$elem.find('.' + options.deleteButtonClass).click(function(e) {
$input.val($input.val().slice(0, -1));
$input.trigger('change');
});
$elem.find('.' + options.submitButtonClass).click(function(e) {
$("#numInput").val("");
});
});
};
$.fn[pluginName].defaults = defaults;
})('keypad');
})(jQuery);결과값
728x90
반응형
'Coding > HTML & CSS' 카테고리의 다른 글
| [HTML & CSS] meter 태그를 사용하여 그래프 그리는 방법 !! (0) | 2023.05.05 |
|---|---|
| [HTML & CSS] input태그 체크박스(checkbox) 상태 확인하는 방법 !! (0) | 2023.03.20 |
| [HTML & CSS] pdf 파일 웹에서 보여 주는 초간단 방법 !! (iframe 태그 사용) (0) | 2023.03.18 |
| [HTML & CSS] input 텍스트 상자에 자동완성 기능 없애는 방법 !! (0) | 2023.01.19 |
| [HTML & CSS] div 태그에 onclick 기능 주는 방법 !! (클릭 이벤트) (0) | 2023.01.16 |
댓글