한글 가상키보드2
페이지 정보
본문
한글 가상키보드2
| 소스예제 |
|---|
|
Tag And Script
<style>
.virtual-keyboard-box {position: relative; display: inline-block; width:100%;}
.virtual-keyboard-box .virtual-input {position: relative; width:100%; padding:0; margin:5px 0;}
.virtual-keyboard-box #virtual-keyboard {position: relative; width: fit-content; background:#eee; padding:10px; margin : 5px auto;}
.virtual-keyboard-box #virtual-keyboard ul {overflow:hidden;margin:0;padding:0;list-style:none;}
.virtual-keyboard-box #virtual-keyboard ul.ul-1{margin-top:10px;}
.virtual-keyboard-box #virtual-keyboard ul.ul-2{margin-left:25px;}
.virtual-keyboard-box #virtual-keyboard ul.ul-3{margin-left:50px;}
.virtual-keyboard-box #virtual-keyboard ul.ul-spc,
.virtual-keyboard-box #virtual-keyboard ul.ul-num,
.virtual-keyboard-box #virtual-keyboard ul.ul-eng{display:none;}
.virtual-keyboard-box #virtual-keyboard ul li {float:left; display: inline-block; width:50px; height:50px; cursor:pointer; list-style:none;}
.virtual-keyboard-box #virtual-keyboard ul li {background-color: #fff;border-color: #e6e6e6;color: #343a40;border: 1px solid #d1d1d1;padding: 7px 10px;border-radius: 9px;text-align: center;}
.virtual-keyboard-box #virtual-keyboard ul li {line-height: 1.5;margin-bottom: 0.6875rem;margin-left: 0.375rem;margin-right: 0.375rem;margin-top: 0.375rem;padding: 0.375rem 0.75rem;box-shadow: 0 0 #d9d9d9, 0 0px #d9d9d9, 0 1px #d9d9d9, 0 2px #d9d9d9, 0 3px #d9d9d9, 0 4px #d9d9d9, 0 5px #d9d9d9, 2px 2.5px 4px #adb5bd, 0 -1px 2.5px #adb5bd;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";}
.virtual-keyboard-box #virtual-keyboard ul.ui-control li {width:110px;}
.virtual-keyboard-box #virtual-keyboard ul.ui-control li[data-skey='Caps-Lock'] font.f-Caps {color: #dfdfdf;}
.virtual-keyboard-box #virtual-keyboard ul.ui-control li[data-skey='Caps-Lock'] font.f-Caps.active {color: #0080ff;}
.virtual-keyboard-box #virtual-keyboard ul.ui-control li[data-skey='spc'] font.f-spc {color: #dfdfdf;}
.virtual-keyboard-box #virtual-keyboard ul.ui-control li[data-skey='spc'] font.f-spc.active {color: #0080ff;}
.virtual-keyboard-box #virtual-keyboard ul.ui-control li[data-skey='number'] font.f-number {color: #dfdfdf;}
.virtual-keyboard-box #virtual-keyboard ul.ui-control li[data-skey='number'] font.f-number.active {color: #0080ff;}
.virtual-keyboard-box #virtual-keyboard ul.ui-control li[data-skey='han-eng'] font.active {font-weight: 600; color: #ff0080;}
.virtual-keyboard-box #virtual-keyboard ul li:focus, .virtual-keyboard-box #virtual-keyboard ul li:hover {box-shadow: 0 0 #d9d9d9, 0 0px #d9d9d9, 0 1px #d9d9d9, 0 2px #d9d9d9, 0 3px #d9d9d9, 0 4px #d9d9d9, 0 5px #d9d9d9, 0 6px #d9d9d9, 0 7px #d9d9d9, 2px 3.5px 4px #adb5bd, 0 -1px 3.5px #adb5bd;background-color: #e6e6e6;color: #343a40;transform: translate3d(0, 1px, 8px);}
.virtual-keyboard-box #virtual-keyboard ul li::after {border-radius: 0.5rem;border-width: 0.125rem;bottom: -13px;left: -0.375rem;right: -0.375rem;top: 3px;transform: translate3d(0, 0, -8px);}
.virtual-keyboard-box #virtual-keyboard ul li:hover::after {transform: translate3d(0, -1px, -8px);}
.virtual-keyboard-box #virtual-keyboard ul li:active {box-shadow: 0 0 1px #888,0 1px 0 #fff, 0 0 0 #C0C0C0, 0 0px 30px rgba(#444, 0.15), 2px 2px 4px rgba(#444, 0.25), -2px 2px 4px rgba(#444, 0.25), 0 0px 4px rgba(#444, 0.25);transform: translateY(4px);}
</style><div class="virtual-keyboard-box">
<div class="virtual-input">
<input type="text" id="test-inputbox" class="frm_input full_input" />
</div>
<div id="virtual-keyboard">
<ul class="ul-0 ui-control">
<li class="key-control li-none" data-skey="Caps-Lock">Caps Lock <font class="f-Caps">●</font></li>
<li class="key-control" data-skey="spc">특수문자 <font class="f-spc">●</font></li>
<li class="key-control" data-skey="number">숫자 <font class="f-number">●</font></li>
<li class="key-control" data-skey="han-eng"><font class="f-han active">한</font>/<font class="f-eng">영</font></li>
<li class="key-control" data-skey="backspace">backspace</li>
</ul>
<ul class="ul-1 ul-spc">
<li>~</li>
<li>!</li>
<li>@</li>
<li>#</li>
<li>$</li>
<li>%</li>
<li>^</li>
<li>&</li>
<li>*</li>
<li>(</li>
</ul>
<ul class="ul-2 ul-spc">
<li>)</li>
<li>-</li>
<li>+</li>
<li>|</li>
<li>`</li>
<li>_</li>
<li>+</li>
<li>\</li>
<li>/</li>
<li>,</li>
</ul>
<ul class="ul-3 ul-spc">
<li><</li>
<li>></li>
<li>:</li>
<li>;</li>
<li>'</li>
<li>"</li>
<li>{</li>
<li>}</li>
<li>[</li>
<li>]</li>
</ul>
<ul class="ul-1 ul-num">
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<ul class="ul-0 ul-han ul-double-consonant">
<li>ㅃ</li>
<li>ㅉ</li>
<li>ㄸ</li>
<li>ㄲ</li>
<li>ㅆ</li>
</ul>
<ul class="ul-1 ul-han">
<li class="key-dc" data-ori="ㅂ" data-dc="ㅃ">ㅂ</li>
<li class="key-dc" data-ori="ㅈ" data-dc="ㅉ">ㅈ</li>
<li class="key-dc" data-ori="ㄷ" data-dc="ㄸ">ㄷ</li>
<li class="key-dc" data-ori="ㄱ" data-dc="ㄲ">ㄱ</li>
<li class="key-dc" data-ori="ㅅ" data-dc="ㅆ">ㅅ</li>
<li>ㅛ</li>
<li>ㅕ</li>
<li>ㅑ</li>
<li>ㅐ</li>
<li>ㅔ</li>
</ul>
<ul class="ul-2 ul-han">
<li>ㅁ</li>
<li>ㄴ</li>
<li>ㅇ</li>
<li>ㄹ</li>
<li>ㅎ</li>
<li>ㅗ</li>
<li>ㅓ</li>
<li>ㅏ</li>
<li>ㅣ</li>
</ul>
<ul class="ul-3 ul-han">
<li>ㅋ</li>
<li>ㅌ</li>
<li>ㅊ</li>
<li>ㅍ</li>
<li>ㅠ</li>
<li>ㅜ</li>
<li>ㅡ</li>
</ul>
<ul class="ul-1 ul-eng">
<li>q</li>
<li>w</li>
<li>e</li>
<li>r</li>
<li>t</li>
<li>y</li>
<li>u</li>
<li>i</li>
<li>o</li>
<li>p</li>
</ul>
<ul class="ul-2 ul-eng">
<li>a</li>
<li>s</li>
<li>d</li>
<li>f</li>
<li>g</li>
<li>h</li>
<li>j</li>
<li>k</li>
<li>l</li>
</ul>
<ul class="ul-3 ul-eng">
<li>z</li>
<li>x</li>
<li>c</li>
<li>v</li>
<li>b</li>
<li>n</li>
<li>m</li>
</ul>
</div>
</div><script>
$(function(e) {
/* func
---------------------------------------------------------- */
// 초중종성 INDEX값을 문자료 변환
var makeChar = function(i, m, t) {
var code = ((i * 21) + m) * 28 + t + 0xAC00;
return String.fromCharCode(code);
}
var iChrIndex = function(chr) {
var index = ((chr.charCodeAt(0) - 0xAC00) / 28) / 21;
return parseInt(index);
}
var mChrIndex = function(chr) {
var index = ((chr.charCodeAt(0)- 0xAC00) / 28) % 21;
return parseInt(index);
}
var tChrIndex = function(chr) {
var index = (chr.charCodeAt(0) - 0xAC00) % 28;
return parseInt(index);
}
/* var
---------------------------------------------------------- */
// 초성INDEX
var indexI = [
'ㄱ', 'ㄲ', 'ㄴ', 'ㄷ', 'ㄸ',
'ㄹ', 'ㅁ', 'ㅂ', 'ㅃ', 'ㅅ', 'ㅆ',
'ㅇ', 'ㅈ', 'ㅉ', 'ㅊ', 'ㅋ', 'ㅌ', 'ㅍ', 'ㅎ']
// 중성INDEX
var indexM = [
'ㅏ', 'ㅐ', 'ㅑ', 'ㅒ', 'ㅓ',
'ㅔ', 'ㅕ', 'ㅖ', 'ㅗ', 'ㅘ', 'ㅙ',
'ㅚ', 'ㅛ', 'ㅜ', 'ㅝ', 'ㅞ', 'ㅟ',
'ㅠ', 'ㅡ', 'ㅢ', 'ㅣ' ];
// 종성INDEX
var indexT = [
'', 'ㄱ', 'ㄲ', 'ㄳ', 'ㄴ', 'ㄵ', 'ㄶ', 'ㄷ', 'ㄹ',
'ㄺ', 'ㄻ', 'ㄼ', 'ㄽ', 'ㄾ', 'ㄿ', 'ㅀ', 'ㅁ',
'ㅂ', 'ㅄ', 'ㅅ', 'ㅆ', 'ㅇ', 'ㅈ', 'ㅊ', 'ㅋ', 'ㅌ', 'ㅍ', 'ㅎ'];
// 조합INDEX
var indexJComb1 = ['ㄳ','ㄵ','ㄶ','ㄺ','ㄻ','ㄼ','ㄽ','ㄾ','ㄿ','ㅀ','ㅄ'];
var indexJComb2 = ['ㄱㅅ','ㄴㅈ','ㄴㅎ','ㄹㄱ','ㄹㅁ','ㄹㅂ','ㄹㅅ','ㄹㅌ','ㄹㅍ','ㄹㅎ','ㅄ'];
var indexMComb1 = ['ㅘ','ㅙ','ㅚ','ㅝ','ㅞ','ㅟ','ㅢ'];
var indexMComb2 = ['ㅗㅏ','ㅗㅐ','ㅗㅣ','ㅜㅓ','ㅜㅔ','ㅜㅣ','ㅡㅣ'];
// 호환용 한글 자모 (3130~318F)
var jaCode = 'ㄱ'.charCodeAt(0);
var jaCodeLast = 'ㅎ'.charCodeAt(0);
var moCode = 'ㅏ'.charCodeAt(0);
var moCodeLast = 'ㅣ'.charCodeAt(0);
/* start
---------------------------------------------------------- */
// test input
var $input = $('#test-inputbox');
// event
$('#virtual-keyboard').on('click', 'li:not(.key-control)', function(e) {
var chr = $(this).text();
var text = $input.val();
$input.focus();
var chrCode = chr.charCodeAt(0);
var isJa = jaCode <= chrCode && chrCode <= jaCodeLast;
var isMo = moCode <= chrCode && chrCode <= moCodeLast;
if (text) {
var lastChr = text.substring(text.length - 1);
var lastChrCode = lastChr.charCodeAt(0);
if (jaCode <= lastChrCode && lastChrCode <= moCodeLast) {
// 자음,모음
if (jaCode <= lastChrCode && lastChrCode <= jaCodeLast) {
if (isMo) {
var i = indexI.indexOf(lastChr);
var m = indexM.indexOf(chr);
var t = 0;
var c = makeChar(i, m, t);
$input.val(text.substring(0, text.length-1) + c);
return;
}
} else if (moCode <= lastChrCode && lastChrCode <= moCodeLast) {
}
} else if (lastChrCode >= 0xAC00 && lastChrCode <= 0xAC00 + 0x2BA4) {
// 한글
var i = iChrIndex(lastChr);
var m = mChrIndex(lastChr);
var t = tChrIndex(lastChr);
if (t == 0) {
// 종성이 없는경우
if (isJa) {
t = indexT.indexOf(chr);
if (t!=-1) { // 없는 종성문자인경우 제외
var c = makeChar(i, m, t);
$input.val(text.substring(0, text.length-1) + c);
return;
}
} else if (isMo) {
// 모음조합문자
var chkChr = indexM[m] + chr;
var combIndex = indexMComb2.indexOf(chkChr);
if (combIndex!=-1) {
var combChr = indexMComb1[combIndex];
m = indexM.indexOf(combChr);
var c = makeChar(i, m, t);
$input.val(text.substring(0, text.length-1) + c);
return;
}
}
} else {
// 종성이 있는경우
if (isMo) {
var tChr = indexT[t];
// 조합문자일경우 다시 쪼갠다
var combIndex = indexJComb1.indexOf(tChr);
if (combIndex!=-1) {
var partChr = indexJComb2[combIndex];
t = indexT.indexOf(partChr[0]);
tChr = partChr[1];
} else {
t = 0;
}
var c1 = makeChar(i, m, t);
i = indexI.indexOf(tChr);
if (i!=-1) {
m = indexM.indexOf(chr);
var c2 = makeChar(i, m, 0);
$input.val(text.substring(0, text.length-1) + c1 + c2);
return;
}
} else if (isJa) {
// 자음조합문자
var chkChr = indexT[t] + chr;
var combIndex = indexJComb2.indexOf(chkChr);
if (combIndex!=-1) {
var combChr = indexJComb1[combIndex];
t = indexT.indexOf(combChr);
var c = makeChar(i, m, t);
$input.val(text.substring(0, text.length-1) + c);
return;
}
}
}
} else {
// 없는 문자
}
}
$input.val(text + chr);
});
$('#virtual-keyboard').on('click', 'li.key-control', function(e) {
var skey = $(this).attr('data-skey');
var $ul_control = $('ul.ui-control'), $ul_double_consonant = $('ul.ul-double-consonant');
var $ul_han = $('ul.ul-han'), $ul_eng = $('ul.ul-eng');
var $ul_spc = $('ul.ul-spc'), $ul_num = $('ul.ul-num');
var $li_Caps = $ul_control.find("li[data-skey='Caps-Lock']");
var $f_Caps = $li_Caps.find('font.f-Caps');
var $li_spc = $ul_control.find("li[data-skey='spc']");
var $f_spc = $li_spc.find('font.f-spc');
var $li_number = $ul_control.find("li[data-skey='number']");
var $f_number = $li_number.find('font.f-number');
var $f_han = $ul_control.find('font.f-han'), $f_eng = $ul_control.find('font.f-eng');
if(skey == 'spc') {
if($f_spc.hasClass('active') === true) {
$f_spc.removeClass('active');
$ul_spc.removeAttr('style');
} else {
$f_spc.addClass('active');
$ul_spc.show();
}
}
if(skey == 'number') {
if($f_number.hasClass('active') === true) {
$f_number.removeClass('active');
$ul_num.removeAttr('style');
} else {
$f_number.addClass('active');
$ul_num.show();
}
}
if(skey == 'Caps-Lock') {
if($f_Caps.hasClass('active') === true) {
$f_Caps.removeClass('active');
$ul_eng.find('li').each(function (index, li_item) {
var s = $(li_item).text().toLowerCase();
$(li_item).text(s);
});
} else {
$f_Caps.addClass('active');
$ul_eng.find('li').each(function (index, li_item) {
var s = $(li_item).text().toUpperCase();
$(li_item).text(s);
});
}
}
if(skey == 'han-eng') {
if($f_han.hasClass('active') === true) {
$f_han.removeClass('active');
$ul_han.hide();
$f_eng.addClass('active');
$ul_eng.show();
$li_Caps.removeClass('li-none');
} else {
$f_han.addClass('active');
$ul_han.removeAttr('style');
$f_eng.removeClass('active');
$ul_eng.removeAttr('style');
$li_Caps.addClass('li-none');
}
}
if(skey == 'backspace') {
var start = $input[0].selectionStart;
var end = $input[0].selectionEnd;
// 텍스트가 선택되어 있다면 선택된 텍스트 삭제, 아니면 하나 앞 문자 삭제
if (start === end && start > 0) {
$input.val( $input.val().slice(0, start - 1) + $input.val().slice(end) );
$input.selectionStart = $input[0].selectionEnd = start - 1;
} else {
$input.val( $input.val().slice(0, start) + $input.val().slice(end) );
$input.selectionStart = $input[0].selectionEnd = start;
}
$input.focus();
}
});
});
</script>
추천
0
비추천
0
- 이전글 특수문자 변환 23.06.21
- 다음글 페이지 내에서 ctrl+f 23.04.28