Home/ Questions/Q 806693
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T00:17:05+00:00

In my web page there is a textbox with width and height equal to

  • 0

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:

  1. I want to set focus to the textbox, when i click anywhere in the form.
  2. I want to make the cursor invisible.

Geetha.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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).

    Example

    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>
    • 0