wanakana
Version:
JS library that transliterates between japanese kana and roman letters.
158 lines (125 loc) • 3.77 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>WanaKana Demo</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
html body {
margin: 0px;
padding: 0px;
font-family: Ubuntu, Helvetica, Arial, sans-serif;
}
h2 {
color: #882D9E;
text-align: center;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
background-color: #eee;
}
input {
border: none;
display: inline-block;
color: #555555;
vertical-align: middle;
font-size: 1.2em;
line-height: 20px;
font-weight: 300;
overflow: auto;
}
input:focus {
outline: none;
}
.wk-site-header {
display: block;
color: #e5e5e5;
background-color: #F0A;
border-bottom: 1px solid #1a1a1a;
width: auto;
height: 40px;
padding: 0px;
font-size: 1.2em;
-webkit-appearance: none;
-webkit-box-shadow: 0px 2px 0 #e5e5e5;
-moz-box-shadow: 0px 2px 0 #e5e5e5;
box-shadow: 0px 2px 0 #e5e5e5;
}
.wk-site-name {
margin-left: 15px;
padding-top: 10px;
text-decoration: none;
font-size: 32px;
color: white;
}
.wk-content {
padding: 15px 15px 10px 15px;
}
input {
display: block;
width: 100%;
height: 3em;
text-align: center;
-webkit-appearance: none;
-webkit-box-shadow: 3px 3px 0 #e1e1e1;
-moz-box-shadow: 3px 3px 0 #e1e1e1;
box-shadow: 3px 3px 0 #e1e1e1;
}
.output {
font-weight: bold;
font-size: 32px;
width: 100%;
height: 40px;
text-align: center;
padding-top: 20px;
margin-bottom: 30px;
color: #0093DD;
-webkit-appearance: none;
-webkit-text-shadow: 0px 3px 0 #eee;
-moz-text-shadow: 0px 3px 0 #eee;
text-shadow: 0px 3px 0 #eee;
}
</style>
</head>
<body>
<div>
<div class="wk-site-header">
<h1 class="wk-site-name">WanaKana Demo</h1>
</div>
<div class="wk-content">
<h2>Romaji to Kana</h2>
<input id="input-translit" autofocus="true" autocapitalize="off" autocomplete="off" autocorrect="off" placeholder="Type here please" type="text" lang="en">
<div class="output" id="output-kana" lang="ja"></div>
<h2>Kana to Romaji</h2>
<input id="input-kana" autofocus="true" autocapitalize="off" autocomplete="off" autocorrect="off" placeholder="Enter kana here" type="text" lang="ja">
<div class="output" id="output-romaji" lang="en"></div>
<h2>IME Mode</h2>
<input id="input-IME" autofocus="true" autocapitalize="off" autocomplete="off" autocorrect="off" placeholder="書いてください" type="text" lang="ja">
</div>
<script type="text/javascript" src="../lib/wanakana.min.js"></script>
<script type="text/javascript">
(function(wk) {
///// IME Mode
var inputIME = document.getElementById('input-IME');
wk.bind(inputIME);
///// Non-IME mode
var inputTranslit = document.getElementById('input-translit');
var outputKana = document.getElementById('output-kana');
function inputChangedTranslit (e) {
outputKana.innerHTML = (wk.toKana(inputTranslit.value));
}
inputTranslit.addEventListener('input', inputChangedTranslit);
///// to romaji
var inputKana = document.getElementById('input-kana');
var outputRomaji = document.getElementById('output-romaji');
function inputChangedKana (e) {
outputRomaji.innerHTML = (wk.toRomaji(inputKana.value));
}
inputKana.addEventListener('input', inputChangedKana);
})(window.wanakana);
</script>
</body>
</html>