I'm writing a simple virtual keyboard for Arabic (indic) digits. Just links that, when clicked, produce the corresponding Unicode Indic character.
The following is my HTML, in the body tag:
<a href="#" id='start'>Start</a>
<div id='vkb' style='padding:20px;font-size:16pt; border:2px solid #eee; width:250px' dir='ltr'>
<a class='
key' href='#' id='0'>٠</a>
<a class='
key' href='#' id='1'>١</a>
<a class='
key' href='#' id='2'>٢</a>
<a class='
key' href='#' id='3'>٣</a>
<a class='
key' href='#' id='4'>٤</a><br />
<a class='
key' href='#' id='5'>٥</a>
<a class='
key' href='#' id='6'>٦</a>
<a class='
key' href='#' id='7'>٧</a>
<a class='
key' href='#' id='8'>٨</a>
<a class='
key' href='#' id='9'>٩</a>
<br />
<a href="#" id='stop'>Stop</a>
</div>
<div id='output' /></div>
This is my CSS:
a
{
text-decoration:none;
}
.
key
{
padding:7px;
background-color:#fff;
margin:5px;
border:2px solid #eee;
display:inline-block;
}
.key:hover
{
background-color:#eee;
}
And this is my javascript:
<script type="text/javascript" src="js/jquery.js"></script>
<script>
$(document).ready(function(){
var toprint = "";
$('#vkb').hide();
$('#start').click(function(e){
toprint = "";
$('#vkb').show();
});
$('#stop').click(function(e){
$('#vkb').hide();
ret = ar2ind(toprint);
$('#output').text(ret);
toprint = "";
});
$('#vkb').click(function(e){
var $key = $(e.target).closest('.
key');
var pressed = $key.attr('id');
if(pressed === undefined){
pressed = "";
}
toprint = toprint + pressed;
});
});
function ar2ind(str)
{ str = str.replace(/0/g, "?");
str = str.replace(/1/g, "?");
str = str.replace(/2/g, "?");
str = str.replace(/3/g, "?");
str = str.replace(/4/g, "?");
str = str.replace(/5/g, "?");
str = str.replace(/6/g, "?");
str = str.replace(/7/g, "?");
str = str.replace(/8/g, "?");
str = str.replace(/9/g, "?");
return str;
}
</script>
It seems simple enough but it's crashing in IE9. (Might be crashing in earlier versions too but haven't been able to check.)
