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 $().
In Enterprise Portal (essentially sharepoint) we're attempting to automatically fire the "click" of a button whenever a td loses focus, and then return focus to the cell of the table we left. The idea is that we want the user to be able to continuously enter data without having to click that button every time.
The problem is, I don't know how to specify a specific cell within the table to return to, so it just returns to the first cell. I've read in several places that this is either very difficult or impossible without things like SlickGrid. Can anyone help me do this in straight up Javascript/Jquery?
The code I have so far looks like this:
<script>
$jQ(window).load(function refreshSummary() {
var activeElement;
$jQ("td").focus(function () {
activeElement = document.activeElement;
});
$jQ("td").focusout(function () {
var refreshLink = "ctl00_ctl00_m_g_78a9aecd_0fef_4b43_a2ff_45942fe92ea0_ctl01_ctl04_RefreshLink";
document.getElementById(refreshLink).click();
document.getelementbyid(activeelement).focus();
});
});
</script>
Don't you want to just focus back on the element after click on focusout?
$jQ(window).load(function refreshSummary() {
var activeElement;
$jQ("td").focus(function () {
activeElement = document.activeElement;
});
$jQ("td").focusout(function () {
var refreshLink = "ctl00_ctl00_m_g_78a9aecd_0fef_4b43_a2ff_45942fe92ea0_ctl01_ctl04_RefreshLink";
document.getElementById(refreshLink).click();
$(this).focus();
});
});
I have the following script insde my asp.net mvc razor view:-
$("#Server_RackID").change(function () {
var idDC = $(this).val();
$.getJSON("#Url.Content("~/Server/LoadDataCenterByRackID")", { rackid: idDC },
function (DCData) {
var select = $("#Server_TMSRack_DataCenterID");
$("#Server_TMSRack_DataCenterID").val(DCData.Value);
});
});
The script will fire when the Server_RackID drop down is changed , but this chnage should be when the user select a new drop down values using the mouse. while if the user using the (up & down) arrows scroll over the drop down items, then the script will not fire ? so can anyone advice on this please?
Thanks
You need to bind the event to both change and keyup, like this:
$("#Server_RackID").on('change keyup', function (event) {
//Do something
});
JSFiddle here.
I have a script that adds up data-attributes from checkboxes, I modified the script to be able to allow users to manually add their own entries into a text input that the keyup function copies into the data-cost="" and debt="" attributes, which a plugin recalculates the total into the blue div box on the right side in this Fiddle. This functionality works, as you can see in the fiddle
But I also want data that is copied into the data-attributes to also be copied into the value="". The plugin uses the value to display it in the yellow summary box on the right, but every time I modify the keyup script, the calculation stops working and the value does not show up in the summary.
Here is the Fiddle
This is the keyup script:
function calculateTotalFor(){
$('#jquery-order-form').data('jprice').onChange();
}
$(function () {
$(document).on('keyup blur paste', '.balance', function() { //Changed here
var $self = $(this),
$checkbox = $self.closest('li').find('input:checkbox');
setTimeout(function() {
var str = $self.val();
$checkbox.data('cost',str.replace(/^\$/, ''));
$checkbox.data('debt',str.replace(/^\$/, ''));
calculateTotalFor();
}, 0)
})
});
I added $checkbox.val(str.replace(/^\$/, '')); before calculateTotalFor(); and it seems to work.
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.