How to disable all keys in key board except tab key for select box in html. Can any one provide the code for this one?
Below is i tried below code but it was not working
I hope this will help you..put textbox and selectbox in the page..
document.getElementById("li1").onkeydown = function (e) {
e.preventDefault();
}
Demo
I don't know what you want to do exactly, but if you use jQuery this is fairly simple:
$('html, body').keydown(function(event){
if(event.keyCode !== 9) { // 9 = tab
event.preventDefault();
}
});
If you want to disable keys only when a given element has focus, you can change the selector inside $().
Related
I am Trying to select a kendo Grid Row .when press "ENTER"
key.
i tried below code:
("#grid").data("kendoGrid").table.focus();
this actually selects the table and focus to the cell.
But i want to select whole row.
By Simply add this you can achieve this....try once..
var selectFirstColumnOfKendoGrid = function () {
var grid = $("#kendogrid").data("kendoGrid");
var firstCell = grid.table.find("tr:first td:first");
grid.current(firstCell);
grid.table.focus();
$('body').animate({ scrollTop: 0 }, 0);
}
in my app kendogrid is the id ...
Try something like this :) The selector may be wrong because I don't know your HTML.
$(document).keypress(function(e) {
if(e.which == 13) { //enter keycode
$("#grid tr:first").focus();
}
});
Selecting the first row of a grid is:
grid.select($("tr:first", grid.tbody));
But I do not understand when you want to press "enter"... but might be a little tricky since keyboard key presses are bound to default handlers.
I had some weird result from jquery events, though I am not fully convinced whether it is a jquery issue. I hope some jquery geeks can answer this.
I had the following code snippet in my html page, to change the focus to the second input box once user enter a string of length 9 in first input box. This auto-focusing is working smoothly. But when I press tab from first input box, it is always skipping the second input box and goes to the next html element to second input box.
$("input.first").change(function (e){
var text = $(this).val();
if (text.length == 9){
$("input[id='second']").focus();
}
});
I tried putting tabindex property to html elements still it continued its misbehavior. But at the end when I changed change event to keypress event tab key started to flow as expected.
Is there anyone who could explain why this happens? Thanks for any answers.
you can add tab index to controls manually. I hope it will work.
$(function() {
var tabindex = 1;
$('input').each(function() {
if (this.type != "hidden") {
var $input = $(this);
$input.attr("tabindex", tabindex);
tabindex++;
}
});
});
I have the following HTML/CSS to create a simple keyboard. I have tried experimenting with jQuery keyPress(), yet I can't seem to get it so while you are pressing a key on the keyboard, the corresponding letter has the class 'trigger'.
For example, when you press Q in the textarea with id 'input', the span with id 'q' should change its background to the color green (to the class 'trigger')
Any help would be much appreciated, thanks in advance.
EDIT
So far I have some Javascript, that alerts on each keystroke. See this example
If you want the background to change only while the key is down you need to set it on keydown and set it back on keyup:
$(function () {
$("#input").keydown(function (event) {
$("#" + String.fromCharCode(event.which)).addClass("trigger");
}).keyup(function (event) {
$("#" + String.fromCharCode(event.which)).removeClass("trigger");
});
});
Note that keydown and keyup return key codes not character codes, but as far as the alphabet keys go it is safe to treat them as if they were character codes for the uppercase letters. (So in the following demo I've changed the ids of the spans to be uppercase to save doing arithmetic in the event handlers.)
Demo: http://jsfiddle.net/AHPaY/6/
P.S. If you experiment with the demo you'll see this works for simultaneous keypresses too, e.g., hold down Q and T at the same time...
On the keypress event, the event.which property maps to a character code. The String.fromCharCode method can be used to convert the numeric charcode to a character.
In the example, a regular expression is used to check whether the single character is a valid code. If yes, then a class is added.
Demo: http://jsfiddle.net/AHPaY/4/
$(function () {
$("#input").keypress(function (event) {
$('.trigger').removeClass('trigger');
var char = String.fromCharCode(event.which).toLowerCase();
if (/[qwerty]/.test(char)) {
$('#'+char).addClass('trigger')
}
});
});
Try this
$(function () {
$("#input").keypress(function (event) {
var keycode=event.which || event.keycode;
var key=String.fromCharCode(keycode).toLowerCase();
$('span.trigger').removeClass('trigger').addClass('key'); // reset
$("#"+key).removeClass('key').addClass('trigger');
});
});
A fiddle is here.
Another fiddle is here.
If you want to leave all the spans green then disable the line commented with reset.
I'm trying to pass an keydown event from one textbox to another. What I mean with this is that if you, for example, press the 'a' key, some code should simulate that key as being pressed in the second textbox.
I do not want to just copy the value of the first textbox into the second - it should be on a per-key basis so to say. Suppose the first textbox contains abc and the second textbox is empty, when you then press the 'd' key in textbox 1, textbox 2 should only contain d.
What I already tried is (http://jsfiddle.net/E5qyr/1/):
$('#t1').keydown(function(e) {
$('#t2').keydown(e);
});
But this does not work (I guess I'm thinking too simple). I know I could append the character pressed by looking at e.keyCode, but also 'backspace' etc. has to be working.
Does anybody have an idea to pass a keydown event from one textbox to another?
Textarea elements don't have listeners automatically installed to them, so triggering a 'keydown' event for the #t2 will not show a response. What you want is to just add the text you get from the #t1 keydown event (of which you are listening) and append it to your #t2.
UPDATED with support for backspace. Other codes found here.
Example:
$('#t1').keydown(function(e) {
if (e.which == 8) { //Backspace
this.text(this.val().substr(0, this.val().length - 1));
} else {
$('#t2').append($('#t1').val());
this.empty();
}
});
Why not replace textbox value onkeydown? It seems it would be more simples to just do txt1.text = txt2.text instead of appending the existing strings in txt1.
Something like this?
$('#t1').keydown(function(e) {
var char = (e.keyCode == 8) ? '' : String.fromCharCode(e.keyCode + (e.shiftKey ? 0 : 32));
$('#t2').val(char);
});
I have a simple in-line edit in my grid, and I want to commit the change when the user tabs off the textbox. The default behavior of jqGrid forces the user to press 'Enter' to commit the change, but this is non-intuitive for our users.
onSelectRow: function(id) {
$(gridCoreGroups).editRow(id, true, undefined, function(response)
{
alert("hello world");
}
}
I've worked my way through the events provided, but they all happen as a result of the user pressing 'Enter', which I want to avoid. Is there something I can wire up that would trigger an action when the user tabs off this cell?
For in line editing you can accomplished this several ways. To bind an onblur event to the input field using the onSelectRow trigger, eliminating the need for edit and save buttons, do something like this:
$('#gridId').setGridParam({onSelectRow: function(id){
//Edit row on select
$('#gridid').editRow(id, true);
//Modify event handler to save on blur.
var fieldName = "Name of the field which will trigger save on blur.";
//Note, this solution only makes sense when applied to the last field in a row.
$("input[id^='"+id+"_"+fieldName+"']","#gridId").bind('blur',function(){
$('#gridId').saveRow(id);
});
}});
To apply a jQuery live event handler to all inputs that may appear within a row (jqGrid labels all inputs as rowId_fieldName ), loop throw the number of rows in your grid and do something like this:
var ids = $("#gridId").jqGrid('getDataIDs');
for(var i=0; i < ids.length; i++){
fieldName = "field_which_will_trigger_on_blur";
$("input[id^='"+ids[i]+"_"+fieldName+"']","#gridId").live('blur',function(){
$('#gridId').jqGrid('saveRow',ids[i]);
});
}
Note: To use blur with .live() like above, you'll need jQuery 1.4 or the patch located at:
Simulating "focus" and "blur" in jQuery .live() method
Be careful with rowIds. When you get into sorting, adding and removing of rows, you may find yourself writing some tricky jQuery to convert row ids to iRows or row numbers.
If you're like me and you went with individual cell edit, you'll want to modify the afterEditCell trigger with something like:
$('#gridId').setGridParam({afterEditCell: function(id,name,val,iRow,iCol){
//Modify event handler to save on blur.
$("#"+iRow+"_"+name,"#gridId").bind('blur',function(){
$('#gridId').saveCell(iRow,iCol);
});
}});
Hope that helps..
This is pretty horrible, but its my take on this problem, and is prob a bit easier and more generic - it presses enter programmatically when the item loses focus :)
afterEditCell: function() {
//This code saves the state of the box when focus is lost in a pretty horrible
//way, may be they will add support for this in the future
//set up horrible hack for pressing enter when leaving cell
e = jQuery.Event("keydown");
e.keyCode = $.ui.keyCode.ENTER;
//get the edited thing
edit = $(".edit-cell > *");
edit.blur(function() {
edit.trigger(e);
});
},
Add that code to your jqgrid setup code.
It assumes that the last edited item is the only thing with .edit-cell as a parent td.
My solution was to use basic jQuery selectors and events independently of the grid to detect this event. I use the live and blur events on the textboxes in the grid to capture the event. The two events are not supported in combination with each other, so this hack ended up being the solution:
Simulating "focus" and "blur" in jQuery .live() method
I know this question is old however the answer is outdated.
A global variable called lastsel must be created and the following added to the jqGrid code
onSelectRow: function (id) {
if (!status)//deselected
{
if ($("tr#" + lastsel).attr("editable") == 1) //editable=1 means row in edit mode
jQuery('#list1').jqGrid('saveRow', lastsel);
}
if (id && id !== lastsel) {
jQuery('#list1').jqGrid('restoreRow', lastsel);
jQuery('#list1').jqGrid('editRow', id, true);
lastsel = id;
}
},
I had the same issue and tried the answers above. In the end I went with a solution that inserts an "Enter" key press when the user is leaving the tab.
// Call this function to save and unfinished edit
// - If an input exists with the "edit-call" class then the edit has
// not been finished. Complete the edit by injecting an "Enter" key press
function saveEdits() {
var $input = $("#grid").find(".edit-cell input");
if ($input.length == 1) {
var e = $.Event("keydown");
e.which = 13;
e.keyCode = 13;
$input.trigger(e);
}
}
Instead of using selectRow use CellSelect.
onCellSelect: function (row, col, content, event) {
if (row != lastsel) {
grid.jqGrid('saveRow', lastsel);
lastsel = row;
}
var cm = grid.jqGrid("getGridParam", "colModel");
//keep it false bcoz i am calling an event on the enter keypress
grid.jqGrid('editRow', row, false);
var fieldName = cm[col].name;
//If input tag becomes blur then function called.
$("input[id^='"+row+"_"+fieldName+"']","#gridId").bind('blur',function(e){
grid.jqGrid('saveRow', row);
saveDataFromTable();
});
//Enter key press event.
$("input[id^='"+row+"_"+fieldName+"']","#gridId").bind('keypress',function(e){
var code = (e.keyCode ? e.keyCode : e.which);
//If enter key pressed then save particular row and validate.
if( code == 13 ){
grid.jqGrid('saveRow', row);
saveDataFromTable();
}
});
}
//saveDataFromTable() is the function which validates my data.