Detect Shift key + click event on iCheck checkbox - javascript

My web page uses iCheck checkboxes. I am trying to get event when Shift key is pressed along with clicking on checkboxes. but no where in the documentation, iCheck gives that notification like normal document.click(function()) gives.
I am using
$('input[name=selectinp]').on('ifChanged', function(event){
...
});
Here, event.shiftkey is undefined.
Please help.

I know this is an old question, but I will answer it to help any future folks that are looking for solutions. The iCheck library does not pass through the entire click event, so you can't check for event.shiftKey. Instead, you have to manually build your own variable that stores whether the shift key is pressed or not:
var shiftIsPressed = false;
$(window).keydown(keyDownHandler);
$(window).keyup(keyUpHandler);
function keyDownHandler(event) {
if (event.key == "Shift") {
shiftIsPressed = true;
}
}
function keyUpHandler(event) {
if (event.key == "Shift") {
shiftIsPressed = false;
}
}
$('input[name=selectinp]').on('ifChanged', function(event){
if (shiftIsPressed) {
...
} else {
...
}
});

Related

How to synchronise ExtJS "checkboxes" (buttons) with Javascript/JQuery?

I am currently trying to synchronize two checkboxes on a page.
I need the checkboxes to be synchronized - to this end, I'm using a Tampermonkey userscript to pick up when one of them is clicked. However, I'm at a loss as to how to do it.
I believe they are not actually checkboxes, but ExtJS buttons that resemble checkboxes. I can't check whether they're checked with JQuery because of this: the checked value is appended to a class once the JS behind the button has run.
I have tried preventDefault and stopPropagation, but either I'm using it wrong or not understanding its' usage.
I'm not quite clever enough to just call the JS behind the box instead of an onclick event. Otherwise, that would solve my issue.
This is my code:
//Variables - "inputEl" is the actual button.
var srcFFR = "checkbox-1097";
var destFFR = "checkbox-1134";
var srcFFRb = "checkbox-1097-inputEl";
var destFFRb = "checkbox-1134-inputEl";
//This checks if they're synchronised on page load and syncs them with no user intervention.
var srcChk = document.getElementById(srcFFR).classList.contains('x-form-cb-checked');
var destChk = document.getElementById(destFFR).classList.contains('x-form-cb-checked');
if (srcChk == true || destChk == false) {
document.getElementById(destFFRb).click();
} else if (destChk == true || srcChk == false) {
document.getElementById(srcFFRb).click();
}
//This is where it listens for the click and attempts to synchronize the buttons.
$(document.getElementById(srcFFRb)).on('click', function(e) {
e.preventDefault();
if (document.getElementById(srcFFR).classList == document.getElementById(destFFR).classList) {
return false;
} else {
document.getElementById(destFFRb).click();
}
});
$(document.getElementById(destFFRb)).on('click', function(e) {
e.preventDefault();
if (document.getElementById(srcFFR).classList == document.getElementById(destFFR).classList) {
return false;
} else {
document.getElementById(srcFFRb).click();
}
});
I'm at a bit of a loss...any help would be greatly appreciated.
Figured it out - I was comparing class lists without singling out what I wanted to actually match.
My solution:
$(document.getElementById(srcFFRb)).on('click', function(){
if (document.getElementById(srcFFR).classList.contains('x-form-cb-checked')
== document.getElementById(destFFR).classList.contains('x-form-cb-checked')) {
return false;}
else {
document.getElementById(destFFRb).click();;
}});
$(document.getElementById(destFFRb)).on('click', function(){
if (document.getElementById(srcFFR).classList.contains('x-form-cb-checked')
== document.getElementById(destFFR).classList.contains('x-form-cb-checked')) {
return false;}
else {
document.getElementById(srcFFRb).click();;
}});

Code won't work when merging a javascript code in one function

Good day everyone!
I have a problem merging the codes in one function. (If it's possible).
First:
There is a table.
When the table row click two buttons will be enabled.
Here's the code:
function enableRegButton() {
$('#registerExist').prop('disabled', false);
$('#edit').prop('disabled', false);
// regButton execute when Enter key pressed
$(document).unbind("keyup").keyup(function(e){
var code = e.which; // recommended to use e.which, it's normalized across browsers
if(code==13)
{
$("#registerExist").click();
}
});
}
Second:
When Escape key pressed it will disable all bind buttons.
Here's the code:
$(document).keyup(function(e) {
if (e.keyCode == 27) { // escape key maps to keycode `27`
$('#registerExist').prop('disabled', true);
$('#edit').prop('disabled', true);
document.getElementById("enStudID").value = "";
document.getElementById("enInfoID").value = "";
document.getElementById("enCoffID").value = "";
document.getElementById("enYearID").value = "";
}
});
Now, what I want to do are those two codes above will merge in one function and it will call the function and trigger all those codes so when I edit the code it will be centralized.
Here's my final code:
function enableRegButton() {
$('#registerExist').prop('disabled', false);
$('#edit').prop('disabled', false);
// regButton execute when Enter key pressed
$(document).unbind("keyup").keyup(function(e){
var code = e.which; // recommended to use e.which, it's normalized across browsers
settings();
});
}
// This code is for ESC button when pressed.
$(document).keyup(function(e) {
settings();
});
function settings(){
if(code==13)
{
$("#registerExist").click();
}
else if (code==27){ // escape key maps to keycode `27`
$('#registerExist').prop('disabled', true);
$('#edit').prop('disabled', true);
document.getElementById("enStudID").value = "";
document.getElementById("enInfoID").value = "";
document.getElementById("enCoffID").value = "";
document.getElementById("enYearID").value = "";
}
}
Problem:
Only the enable button is working when table row is click
Pressing Escape key will not disable the enabled buttons.
Code won't run when pressing Enter Key.
You need to pass the key code to the settings method.
$(document).keyup(function(e) {
settings(e.keyCode);
});
function settings(code) {
Use the browser's developer console when debugging Javascript issues, it's an invaluable tool and picks up problems like this quite easily.
You are assigning the code variable in the unbind callback, not in the bind callback :)

Unable to get alt key press and alt key up both in angularjs js or jQuery

I need to update $scope.CtrlKeypressed value if user pressed alt key it is set to try if he release alt key then ift will be set false but I am stuck here on release. It is not working i am using following code. I unable to do this with angular then I code jQuery code for it but this is also not working
document.body.addEventListener('keydown', function (e) {
if (e.keyCode==18)
{
alert("Keydown")
$scope.ISCtrlPressed = true;
$scope.$apply();
}
});
document.body.addEventListener('keyup', function (e) {
$scope.ISCtrlPressed = false;
$scope.$apply();
});
Can someone guide me how I need to work for this?
Look at this codepen with your code modified. You will get into console the I was pressed message as long as you keep the key pressed and receive an alert when release the key. It also depends on your operating system and how you have configured the keyboard(number of repetitions if kept pressed).
http://codepen.io/TunderScripts/pen/YpxWLR?editors=0011#0
document.body.addEventListener('keydown', function(e) {
if (e.keyCode == 18) {
console.log('I was pressed');
}
});
document.body.addEventListener('keyup', function(e) {
alert('aaaa come back')
});
<script>
document.body.addEventListener('keydown', function (evt) {
if (evt.keyCode == 18)
{
alert("Keydown");
alert("Keyup");
}
});
</script>

How to enable on click after removing it?

I have two conditions here, cond1 and cond2 .If its the cond1 I will disable my onclick event, else I will enable it.
This is what I fished out :
if(cond1) {
document.getElementById('mTag').removeAttribute("onclick");
} else {
document.getElementById('mTag').setAttribute('onclick');
}
The problem is once the onclick gets disabled , its not getting enabled again. If its cond2 , then it must be enabled . What am I doing wrong? Kindly suggest some solution to this.
Why would you do that? This will be annoying user experience anyway. Better is to disable/enable the tag:
document.getElementById('mTag').disabled = cond1;
To prevent the click event, you have to prevent the event from bubbling upwards.
document.getElementById('mTag').onclick = function(e) {
if (!e) var e = window.event;
event.cancelBubble = !cond1;
...
};
You did it wrong. Removing the attribute doesn't unbind the event.
This is the right way:
document.getElementById("mTag").onclick = null;
you don't need to remove onclick attribute you can set a flag in your handler
var enable;
function myhandler() {
if (enable) {
//my code
}
}
if(cond1){
enable = false;
} else {
enabled = true;
}
I think it's better to set a flag, and check for that flag at the beginning of your handler:
function handler(event) {
if ( !this.flag )
return;
// do the actual handling
}

ExtJs simulate TAB on ENTER keypress

I know it is not the smartest idea, but I still have to do it.
Our users want to use ENTER like TAB.
So, the best I came up with is this:
Ext.override(Ext.form.field.Base, {
initComponent: function() {
this.callParent(arguments);
this.on('afterrender', function() {
var me=this;
this.getEl().on('keypress',function (e){
if(e.getKey() == 13) {
me.nextNode().focus();
}
});
});
}
});
But it still does not work exactly the same way as TAB.
I mean, it works OK with input fields, but not other controls.
May be there is some low-level solution.
Any ideas?
In the past I've attached the listener to the document, something like this:
Ext.getDoc().on('keypress', function(event, target) {
// get the form field component
var targetEl = Ext.get(target.id),
fieldEl = targetEl.up('[class*=x-field]') || {},
field = Ext.getCmp(fieldEl.id);
if (
// the ENTER key was pressed...
event.ENTER == event.getKey() &&
// from a form field...
field &&
// which has valid data.
field.isValid()
) {
// get the next form field
var next = field.next('[isFormField]');
// focus the next field if it exists
if (next) {
event.stopEvent();
next.focus();
}
}
});
For Ext.form.field.Text and similar xtypes there is a extra config enableKeyEvents that needs to be set before the keypress/keydown/keyup events fire.
The enableKeyEvents config option needs to be set to true as it's default to false.
ExtJS API Doc
Disclaimer: I'm not an expert on ExtJs.
That said, maybe try something like:
if (e.getKey() === 13) {
me.blur();
return false; // cancel key event to prevent the [Enter] behavior
}
You could try this
if (e.getKey() === 13) {
e.keyCode = Ext.EventObject.TAB
this.fireEvent(e, {// any additional options
});
}
Haven't really tried this ever myself.

Categories