easy-typing-input-tool
Version:
A tool utilizing google input tool for the use of easy typing repositories such as ENT, EHt & EBT
70 lines (58 loc) • 2.41 kB
HTML
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GIT</title>
<style>
#input_tool_wrapper, #tamil_input_tool_wrapper, #arabic_input_tool_wrapper {
width: 100%;
border: 1px solid #333;
}
#input_tool, #tamil_input_tool, #arabic_input_tool {
width: 100%;
}
#input_tool_helper, #tamil_input_tool_helper, #arabic_input_tool_helper {
border: 1px solid #ccc;
height: 100px;
width: 100%;
}
#input_tool_helper .btn, #tamil_input_tool_helper .btn, #arabic_input_tool_helper .btn{
border: 1px solid #ccc;
background-color: #f9f9f9;
}
/** May be put in javascript **/
#InputSuggestions .btn {
outline: none;
}
#InputSuggestions button.selected {
background-color: #2b6bbd ;
color: #fff;
}
#InputSuggestions .btn:hover {
background-color: #2b6bbd ;
color: #fff;
}
</style>
</head>
<body>
<!-- Ideally a desktop version, where you don't want to display input tool helper but want to display additional option via pou up suggestion box-->
<div id="input_tool_wrapper">
<textarea id="input_tool" rows="10" style="font-size: 14px"></textarea>
<input type="hidden" name="googleInputKeyCode" value="ne-t-i0-und">
</div>
<hr>
<!-- Ideally a mobile version, where you don't want to display option via input tool helper section -->
<div id="tamil_input_tool_wrapper">
<textarea id="tamil_input_tool" rows="10" style="font-size: 14px"></textarea>
<input type="hidden" name="tamilInputKeyCode" value="ta-t-i0-und">
<div id="input_tool_helper"><em>Additional options appears here!</em></div>
</div>
<hr>
<div id="arabic_input_tool_wrapper">
<textarea id="arabic_input_tool" rows="10" style="font-size: 14px" dir="rtl"></textarea>
<div id="arabic_input_tool_helper"><em>Additional options appears here!</em></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- <script src="../dist/easy-typing-input-tool-bundle.js"></script>-->
<script src="../dist/google-transliteration-bundle.js"></script>
</body>
</html>