Hi All,
In my web page there is a textbox with width and height equal to 0. This textbox is used to get the scanned bar code value which should not be visible to the user.
Needs:
Geetha.
As for setting focus,
$('#idOfTextBox').focus();
will do the trick. You can add that to any click handler, such as
$('#idOfFormOrParentDiv').click(function() {
$('#idOfTextBox').focus();
$(this).css('cursor', 'none');
});
As for hiding the cursor, you could apply a cursor: none to the form or parent div as a style or as in the preceding example change it's css via jquery.
The cursor:none is while the cursor is in the bounds of the element - though this behavior in it's entirety seems obscure and unnecessary (not to mention confusing to the user).
Here's an example of using absolute positioning to both hide the input field and its cursor. It focuses the field on load, so if you type, then press the Go button, you'll see what you typed.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Test Page</title>
<style type='text/css'>
body {
font-family: sans-serif;
}
#myTextBox {
position: absolute;
left: -10000px;
top: 0px;
}
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type='text/javascript'>
(function() {
$(document).ready(pageInit);
function pageInit() {
$('#btnGo').click(go);
$('#myTextBox').focus();
}
function go() {
alert($('#myTextBox').val());
}
})();
</script>
</head>
<body><div>
<input id='myTextBox' type='text' size='1'>
<input id='btnGo' type='button' value='Go'>
</div></body>
</html>