한글 가상키보드 > 자료실

한글 가상키보드

페이지 정보

본문

한글 가상키보드

한글 가상키보드
소스예제
ㅃ ㅉ ㄸ ㄲ ㅆ ㅂ ㅈ ㄷ ㄱ ㅅ ㅛ ㅕ ㅑ ㅐ ㅔ ㅁ ㄴ ㅇ ㄹ ㅎ ㅗ ㅓ ㅏ ㅣ ㅋ ㅌ ㅊ ㅍ ㅠ ㅜ ㅡ q w e r t y u i o p a s d f g h j k l z x c v b n m

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 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 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">
			<li>ㅃ</li>
			<li>ㅉ</li>
			<li>ㄸ</li>
			<li>ㄲ</li>
			<li>ㅆ</li>
		</ul>
		<ul class="ul-1">
			<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">
			<li>ㅁ</li>
			<li>ㄴ</li>
			<li>ㅇ</li>
			<li>ㄹ</li>
			<li>ㅎ</li>
			<li>ㅗ</li>
			<li>ㅓ</li>
			<li>ㅏ</li>
			<li>ㅣ</li>
		</ul>
		<ul class="ul-3">
			<li>ㅋ</li>
			<li>ㅌ</li>
			<li>ㅊ</li>
			<li>ㅍ</li>
			<li>ㅠ</li>
			<li>ㅜ</li>
			<li>ㅡ</li>
		</ul>
		<ul class="ul-1">
			<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">
			<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">
			<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', function() {
		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);
	});
});
</script>

로그인

회원로그인

로그인

한글 가상키보드 > 자료실

인기검색어

회원로그인

오늘 본 게시물

오늘 본 페이지

오늘 본 C.m.A Util

자료실

C.m.A Lib

자료실

한글 가상키보드

페이지 정보

본문