<script type="text/javascript">
$(document).ready(function() {
$('#remember').live('click', function() {
$('#txtkeyboard').focus(function() {
$(this).addClass("focus");
$('#txtpassword').removeClass("focus");
});
$('#txtpassword').focus(function() {
$(this).addClass("focus");
$('#txtkeyboard').removeClass("focus");
});
var isChecked = $('#remember:checked').val() ? true : false;
if (isChecked == true) {
var count = $('#tblkeyboard').find('tr td').length;
$('#tblkeyboard').css("font-weight", "bold");
$('#tblkeyboard tr td').click(function() {
var username = $(this).text().trim();
if (username == 'CLEAR') {
$('#txtkeyboard').val('');
$('#txtpassword').val('');
return;
}
else if (username == 'CAPS LOCK') {
for (i = 0; i < count; i++) {
var ss = $('#tblkeyboard').find('td:eq(' + i + ')').text();
if (i == 65 || i == 66) { return; }
var iscap = false;
if (/[a-zA-Z]/.test(ss) == true) {
var uppercase = new RegExp('[A-Z]');
var lowercase = new RegExp('[a-z]');
if (ss.match(uppercase)) {
iscap = true;
}
if (ss.match(lowercase)) {
iscap = false;
}
if (iscap == false) {
$('#tblkeyboard').find('td:eq(' + i + ')').text(ss.toUpperCase());
}
if (iscap == true) {
$('#tblkeyboard').find('td:eq(' + i + ')').text(ss.toLowerCase());
}
}
}
}
else {
var focused = $('.focus').attr("id");
//alert(focused);
var a = $('#' + focused).val();
//alert(a + ' ' + username);
$('#' + focused).val(a + username);
}
});
} else { location.reload(true); return; }
})
})
</script>
HTML Script
<div class="row-fluid" align="center">
<div class="well span5 left login-box">
<div class="alert alert-info">
Please login with your Username and Password.
</div>
<div class="form-horizontal" >
<fieldset>
<div class="input-prepend" title="Username" data-rel="tooltip">
<span class="add-on"><i class="icon-user"></i></span>
<asp:TextBox ID="txtkeyboard" class="input-large span10" Text="admin"
runat="server" Width="300px">admin</asp:TextBox>
</div>
<div class="clearfix"></div>
<div class="input-prepend" title="Password" data-rel="tooltip">
<span class="add-on"><i class="icon-lock"></i></span>
<asp:TextBox ID="txtpassword" class="input-large span10" Text="admin123456"
runat="server" TextMode="Password" Width="300px"></asp:TextBox>
</div>
<div class="clearfix"></div>
<div class="input-prepend">
<label class="remember" for="remember"><input type="checkbox" id="remember" />Enable Virtual Keyboard</label
</div>
<div class="clearfix"></div>
<p class="center span5">
<asp:Button ID="btnLogin" class="btn btn-primary" runat="server" Text="Login"
Width="80px" onclick="btnLogin_Click" />
</p>
</fieldset>
</div>
</div><!--/span-->
<div class="well span5 left login-box">
<div class="alert alert-info">
Online Virtual Keyboard
</div>
<table id="tblkeyboard" class="style1">
<tr>
<td >
~</td>
<td>
!</td>
<td>
@</td>
<td>
#</td>
<td>
$</td>
<td>
%</td>
<td>
^</td>
<td>
&</td>
<td>
*</td>
<td>
(</td>
<td>
)</td>
<td>
_</td>
<td>
+</td>
</tr>
<tr>
<td>
`</td>
<td>
1</td>
<td>
2</td>
<td>
3</td>
<td>
4</td>
<td>
5</td>
<td>
6</td>
<td>
7</td>
<td>
8</td>
<td>
9</td>
<td>
0</td>
<td>
-</td>
<td>
=</td>
</tr>
<tr>
<td>
q</td>
<td>
w</td>
<td>
e</td>
<td>
r</td>
<td>
t</td>
<td>
y</td>
<td>
u</td>
<td>
i</td>
<td>
o</td>
<td>
p</td>
<td>
{</td>
<td>
}</td>
<td>
|</td>
</tr>
<tr>
<td>
a</td>
<td>
s</td>
<td>
d</td>
<td>
f</td>
<td>
g</td>
<td>
h</td>
<td>
j</td>
<td>
k</td>
<td>
l</td>
<td>
[</td>
<td>
]</td>
<td>
\</td>
<td>
/</td>
</tr>
<tr>
<td>
z</td>
<td>
x</td>
<td>
c</td>
<td>
v</td>
<td>
b</td>
<td>
n</td>
<td>
m</td>
<td>
<</td>
<td>
></td>
<td>
;</td>
<td>
:</td>
<td>
'</td>
<td>
"</td>
</tr>
<tr>
<td colspan="5">
CAPS LOCK </td>
<td colspan="5">
CLEAR</td>
<td>
,</td>
<td>
?</td>
<td>
.</td>
</tr>
</table>
</div>
</div>
$(document).ready(function() {
$('#remember').live('click', function() {
$('#txtkeyboard').focus(function() {
$(this).addClass("focus");
$('#txtpassword').removeClass("focus");
});
$('#txtpassword').focus(function() {
$(this).addClass("focus");
$('#txtkeyboard').removeClass("focus");
});
var isChecked = $('#remember:checked').val() ? true : false;
if (isChecked == true) {
var count = $('#tblkeyboard').find('tr td').length;
$('#tblkeyboard').css("font-weight", "bold");
$('#tblkeyboard tr td').click(function() {
var username = $(this).text().trim();
if (username == 'CLEAR') {
$('#txtkeyboard').val('');
$('#txtpassword').val('');
return;
}
else if (username == 'CAPS LOCK') {
for (i = 0; i < count; i++) {
var ss = $('#tblkeyboard').find('td:eq(' + i + ')').text();
if (i == 65 || i == 66) { return; }
var iscap = false;
if (/[a-zA-Z]/.test(ss) == true) {
var uppercase = new RegExp('[A-Z]');
var lowercase = new RegExp('[a-z]');
if (ss.match(uppercase)) {
iscap = true;
}
if (ss.match(lowercase)) {
iscap = false;
}
if (iscap == false) {
$('#tblkeyboard').find('td:eq(' + i + ')').text(ss.toUpperCase());
}
if (iscap == true) {
$('#tblkeyboard').find('td:eq(' + i + ')').text(ss.toLowerCase());
}
}
}
}
else {
var focused = $('.focus').attr("id");
//alert(focused);
var a = $('#' + focused).val();
//alert(a + ' ' + username);
$('#' + focused).val(a + username);
}
});
} else { location.reload(true); return; }
})
})
</script>
HTML Script
<div class="row-fluid" align="center">
<div class="well span5 left login-box">
<div class="alert alert-info">
Please login with your Username and Password.
</div>
<div class="form-horizontal" >
<fieldset>
<div class="input-prepend" title="Username" data-rel="tooltip">
<span class="add-on"><i class="icon-user"></i></span>
<asp:TextBox ID="txtkeyboard" class="input-large span10" Text="admin"
runat="server" Width="300px">admin</asp:TextBox>
</div>
<div class="clearfix"></div>
<div class="input-prepend" title="Password" data-rel="tooltip">
<span class="add-on"><i class="icon-lock"></i></span>
<asp:TextBox ID="txtpassword" class="input-large span10" Text="admin123456"
runat="server" TextMode="Password" Width="300px"></asp:TextBox>
</div>
<div class="clearfix"></div>
<div class="input-prepend">
<label class="remember" for="remember"><input type="checkbox" id="remember" />Enable Virtual Keyboard</label
</div>
<div class="clearfix"></div>
<p class="center span5">
<asp:Button ID="btnLogin" class="btn btn-primary" runat="server" Text="Login"
Width="80px" onclick="btnLogin_Click" />
</p>
</fieldset>
</div>
</div><!--/span-->
<div class="well span5 left login-box">
<div class="alert alert-info">
Online Virtual Keyboard
</div>
<table id="tblkeyboard" class="style1">
<tr>
<td >
~</td>
<td>
!</td>
<td>
@</td>
<td>
#</td>
<td>
$</td>
<td>
%</td>
<td>
^</td>
<td>
&</td>
<td>
*</td>
<td>
(</td>
<td>
)</td>
<td>
_</td>
<td>
+</td>
</tr>
<tr>
<td>
`</td>
<td>
1</td>
<td>
2</td>
<td>
3</td>
<td>
4</td>
<td>
5</td>
<td>
6</td>
<td>
7</td>
<td>
8</td>
<td>
9</td>
<td>
0</td>
<td>
-</td>
<td>
=</td>
</tr>
<tr>
<td>
q</td>
<td>
w</td>
<td>
e</td>
<td>
r</td>
<td>
t</td>
<td>
y</td>
<td>
u</td>
<td>
i</td>
<td>
o</td>
<td>
p</td>
<td>
{</td>
<td>
}</td>
<td>
|</td>
</tr>
<tr>
<td>
a</td>
<td>
s</td>
<td>
d</td>
<td>
f</td>
<td>
g</td>
<td>
h</td>
<td>
j</td>
<td>
k</td>
<td>
l</td>
<td>
[</td>
<td>
]</td>
<td>
\</td>
<td>
/</td>
</tr>
<tr>
<td>
z</td>
<td>
x</td>
<td>
c</td>
<td>
v</td>
<td>
b</td>
<td>
n</td>
<td>
m</td>
<td>
<</td>
<td>
></td>
<td>
;</td>
<td>
:</td>
<td>
'</td>
<td>
"</td>
</tr>
<tr>
<td colspan="5">
CAPS LOCK </td>
<td colspan="5">
CLEAR</td>
<td>
,</td>
<td>
?</td>
<td>
.</td>
</tr>
</table>
</div>
</div>
Useful code
ReplyDelete