We Keep Coding

Getting key code in Firefox from webforms textbox keydown event

My textbox is declared thus:
<asp:TextBox ID="txtShowManyItemTag" CssClass="price" onkeydown="return txtShowManyItemTagKeyUp(this);" TabIndex= "997" runat="server" Text="" Width="50px" />
The javascript function called is:
function txtShowManyItemTagKeyUp(txt) {
if (window.event.keyCode == 13 && txt.value != '') {
var nextRow = $(txt).closest('tr').next();
if (nextRow.length > 0) {
$(txt).closest('tr').next().find(".price").select();
}
else {
$("#<%=btnOkMany.ClientID %>").select();
}
return false;
}
}
In Chrome and IE, the window.event.keyCode == 13 correctly detects the Enter key being pressed, but I have been unable to find the equivalent for Firefox. Note that I am not passing an event, I'm passing the control that's triggering the event, and I can find no way to get the key code from that object. I'm going through stack overflow, but have not yet found something that matches this situation.
Thanks!

Instead of the onkeydown attribute, use
$("#txtShowManyItemTag").on('keydown', txtShowManyItemTagKeyUp);
And declare the function as
function txtShowManyItemTagKeyUp(e) { ... }
Inside it, you can now use e to refer to the event, and this to refer to the <input>.

RadioButton doesn't "receive" focus

I've pieced together some code to use in ASP.NET to prevent controls from losing focus on postback so a tab OR click of another control saves the users position and returns it.
In Page_Load I have the following:
PartNum_tb.Attributes["onfocus"] = "gotFocus(this)";
Department_tb.Attributes["onfocus"] = "gotFocus(this)";
PartWeight_tb.Attributes["onfocus"] = "gotFocus(this)";
Standard_rb.Attributes.Add("onfocus","gotFocus(this)");
Special_rb.Attributes.Add("onfocus","gotFocus(this)");
if (Page.IsPostBack)
Page.SetFocus(tabSelected.Value);
This is my Javascript (tabSelected is a hidden field):
<script type="text/javascript">
function gotFocus(control) {
document.getElementById('form1').tabSelected.value = control.id;
if (control.type == "text") {
if (control.createTextRange) {
//IE
var FieldRange = control.createTextRange();
FieldRange.moveStart('character', control.value.length);
FieldRange.collapse();
FieldRange.select();
}
else {
//Firefox and Opera
control.focus();
var length = control.value.length;
control.setSelectionRange(length, length);
}
}
}
</script>
The problem is when I tab or click onto one of the radio buttons, it returns focus to whatever the last control was instead which is unintuitive and confusing to a user. It does this because the RadioButton never gets focus, therefore the cursor position doesn't get updated. After extensive Google searching it appears that its not really possible to know when a RadioButton gains focus. Is there any solution known to even just work around this problem?

A solution may be adding a keypress event to the previous field and use the click event on the radios. Also, move the control.focus(); out of the if statement:
Javascript
function changeFocus(next) {
gotFocus(next);
}
function gotFocus(control) {
document.getElementById('form1').tabSelected.value = control.id;
control.focus();
if (control.type == "text") {
if (control.createTextRange) {
//IE
var FieldRange = control.createTextRange();
FieldRange.moveStart('character', control.value.length);
FieldRange.collapse();
FieldRange.select();
}
else {
//Firefox and Opera
var length = control.value.length;
control.setSelectionRange(length, length);
}
}
}

How to: Dynamically invoke javascript from asp.net input box?

I have a asp.net input box:
<asp:TextBox ID="InCL" runat="server" Text=""></asp:TextBox>
As soon as a number is entered I would like to send that value to a javascript function that updates a google gauge.
For example, user inputs 77, the google gauge immediately dynamically moves to that position.
Any help is appreciated.
Thank You.
EDIT
I'm looking at the onkeyup DOM event, is this a good way to go?
I think I'm just talking to myself on here.....

Here is a script in jQuery I used to do something very similar. It does indeed use onkeyup to set the value; it also uses onkeydown to prevent non-numeric values; and forces a default value of 0 if the user tries to leave the textbox with no value:
var updateUI = function(value) {
//set gauge
};
var textbox = $('#id_of_textbox)'
textbox.keydown(function(e) {
return validNumberKeys.indexOf(e.which) > -1;
}).keyup(function(e) {
var input = $(e.target);
if(input.val() !== '') {
updateUI(input.val());
}
}).blur(function(e) {
var input = $(e.target);
if(input.val()==='') { input.val('0'); }
updateUI(input.val());
});
var validNumberKeys = [8,9,13,16,17,18,35,36,37,38,39,40,45,46,48,49,50,51,52,53,54,55,56,57,96,97,98,99,100,101,102,103,104,105];

You can do this:
<asp:TextBox ID="InCL" runat="server" onchange="YourJavaScriptFunction()" Text=""></asp:TextBox>
YourJavaScriptFunction() would then read the value out of InCL and do whatever you need to do with it.
You could also pass the value to your JavaScript like this: onchange="YourJavaScriptFunction(this.value)"
The same syntax will work with onkeyup: onkeyup="YourJavaScriptFunction()"

Can't block keys using event listener

<body id="body" runat="server" onkeydown="return showKeyCode(event)">
Now whenever I hit a key, IE8 (or in comp mode) throws an exception directing to a problem
in line x, which happens to be my body tag. How can I prevent that ?
The JS code to my knowledge should be with IE comp. (works in Chrome)
Moreover the code doesn't work in IE and Firefox (it doesn't block F5 and Enter)
--> Object expected
var version = navigator.appVersion;
function showKeyCode(e) {
var keycode = (window.event) ? event.keyCode : e.keyCode;
if ((version.indexOf('MSIE') != -1)) {
if (keycode == 13) {
event.keyCode = 0;
event.returnValue = false;
return false;
}
}
else {
if (keycode == 13) {
return false;
}
}
}
Another problem I'm facing is with this simple JS in IE & FF (works in Chrome):
Nothing happens & --> Object expected
<a onclick="ClearTextboxes();" title="Close" id="close" runat="server">Close</a>
....in script tags:
function ClearTextboxes() {
document.getElementById('<%= txtbox_name.ClientID %>').value = '';
document.getElementById('<%= txtbox_email.ClientID %>').value = '';
document.getElementById('<%= txtbox_content.ClientID %>').value = '';
document.getElementById('<%= ResultMail.ClientID %>').style.display = 'none';
}

You have a lot of unnecessary code in your showKeyCode function. The following will do just as well; you're already guaranteed that e will refer to the key event object becuase of the way you're passing in event in the body's onkeydown attribute, and there's no need for any browser sniffing at all. return false is the correct way to prevent the browser's default action when using a DOM0 key handler, so no need for e.returnValue.
You'll have problems blocking F5 and unless you have a seriously good reason you shouldn't do it anyway, since the user is used to it performing a page refresh. If you change the function to the following then there's no reason why it shouldn't prevent the Enter key's default action:
function showKeyCode(e) {
if (e.keyCode == 13) {
return false;
}
}

Autocomplete and User define keyboard

I am using asp:button to create a keyboard with A-Z and 0-9 for touch screen using Java script. This keyboard is linked with one textbox. If we click one button corresponding text will be displayed on the textbox. Its working fine. I have included the autocomplete feature to this textbox using jquery JQuery Autocomplete.
Problem:
The autocomplete is not working if i my user define keyboard. How to modify my key buttons as keyboard keys[Set event keycode]? Is it possible? Is there any other way to achieve this?
Code:
<asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
<asp:Button ID="zero" runat="server" Text="0" CssClass="myclass" OnClientClick="return typeLetter(this);" TabIndex="20"/>
function typeLetter(currentbutton) {
if (previousActiveElement != null) {
if (previousActiveElement == 'antSearchText'){
var position = document.getElementById('position').value;
if (position == '') {
alert('chk position');
} else {
var existingString = document.getElementById(previousActiveElement).value;
var beforeString = existingString.substring(0, position);
var afterString = existingString.substring(position, existingString.length);
document.getElementById(previousActiveElement).value = beforeString + currentbutton.value + afterString;
setCaretPosition(document.getElementById(previousActiveElement), parseInt(position) + 1);
setCaretPosition(document.getElementById(previousActiveElement), parseInt(position) + 1);
}
}
}
return false;
}
Edit:
In autocomplete plugin the following is getting the key event, How to pass same key event by using my keys?
$input.bind(($.browser.opera ? "keypress" : "keydown") + ".autocomplete", function(event) {
}

Try triggering the jQuery keydown/keyup event manually. I cannot recall for the life of me which one autocomplete triggers on, but here's the gist:
// your documment.getElementById(...)
jQuery('#'+previousActiveElement).keyup();
// your setCaretPosition
Try the different key events and one should cause the autocomplete to kick in.
Hope that helps!
Thanks,
Joe

Problem get solved by using the following code.
Code:
var q = document.getElementById('txtbox');
var evObj = document.createEventObject();
evObj.keyCode = 84; // [T] key
q.fireEvent('onkeydown', evObj);
Geetha.