yonghee

<style>
.__keyinp {width:100%;box-sizing:border-box;border:1px solid #ddd;height:30px;text-indent:10px;margin-bottom:10px;font-size:14px;}
.__keyboard {width:100%;}
.__keyboard tr > * {border:1px solid #ddd;text-align:center;}
.__keyboard button {display:block;padding:5px 0;font-family:D2coding,sans-serif;box-sizing:border-box;width:50px;border:none;background:none;}
</style>

<div style="width:500px;">
	<input type="text" class="__keyinp">
	<table class="__keyboard">
		<tr>
			<td><button type="button" onclick="addkey(this,'Q');">Q</button></td>
			<td><button type="button" onclick="addkey(this,'W');">W</button></td>
			<td><button type="button" onclick="addkey(this,'E');">E</button></td>
			<td><button type="button" onclick="addkey(this,'R');">R</button></td>
			<td><button type="button" onclick="addkey(this,'T');">T</button></td>
			<td><button type="button" onclick="addkey(this,'Y');">Y</button></td>
			<td><button type="button" onclick="addkey(this,'U');">U</button></td>
			<td><button type="button" onclick="addkey(this,'I');">I</button></td>
			<td><button type="button" onclick="addkey(this,'O');">O</button></td>
			<td><button type="button" onclick="addkey(this,'P');">P</button></td>
		</tr>
		<tr>
			<td><button type="button" onclick="addkey(this,'A');">A</button></td>
			<td><button type="button" onclick="addkey(this,'S');">S</button></td>
			<td><button type="button" onclick="addkey(this,'D');">D</button></td>
			<td><button type="button" onclick="addkey(this,'F');">F</button></td>
			<td><button type="button" onclick="addkey(this,'G');">G</button></td>
			<td><button type="button" onclick="addkey(this,'H');">H</button></td>
			<td><button type="button" onclick="addkey(this,'J');">J</button></td>
			<td><button type="button" onclick="addkey(this,'K');">K</button></td>
			<td><button type="button" onclick="addkey(this,'L');">L</button></td>
			<td></td>
		</tr>
		<tr>
			<td><button type="button" onclick="addDel(this,'1');">-</button></td>
			<td><button type="button" onclick="addDel(this,'all');">ALL</button></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>
</div>

<script>
function addkey(a,b){
	var txt = $('.__keyinp').val();
	$('.__keyinp').val(txt+b);
}
function addDel(a,b){
	if(b=='all'){
		$('.__keyinp').val('');
	}else{
		var txt = $('.__keyinp').val();
		$('.__keyinp').val(txt.slice(0,-1));
	}
}
</script>