I'm currently trying to change the default behaviour of a multiselect element, so that a user can select and deselect multiple values, without having to press the Ctrl key all the while.
I found a simple solution here, but this does not work in ie8 (because in ie, the onmousedown does not apply to option elements).
But I figured, that one could just simulate a pressed control key, whenever the mouse hovers over a multiselect:
$(document).ready(function() {
$('select').hover(function(e) {
var kde = jQuery.Event("keydown");
kde.ctrlKey = true; //something like this
kde.keyCode = 17; //or this - i don't know
$(e.target).trigger(kde);
});
});
Why does this not work?
Is the Ctrl key directly being released again?
Is something wrong with the code?
Am I missing something else entirely?
You can't simulate such events by programmatically pushing keyboard buttons, just like you can't produce a capital A by simulating the shift key while the user pushes the a key on their keyboard. Besides, even if it would work it wouldn't work: on Macs you press cmd, not ctrl, to select multiple elements.
So unfortunately you'll have to drop this approach and look for other options.
You probably need to add a check box for each of your items, rather than a multi select control.
It is easier in code to write functions which uncheck the others when a new one is selected than to prevent this default behaviour.
Related
I have a DataGrid with a search function and I want the Website to automatically refresh the grid with every key pressed in the search bar, just like modern search engines do. Imagine it like Pressing enter after every key pressed, or clicking on the search button. The only way in Mendix to do it is with external Widgets (cant use them cause most of them Arent able to search for related entities in the database) or to use JavaScript Snippets which I did.
I have already tried to programmatically press enter, but I cannot get the Code to do it.
Another Option I tried was to programmatically click the search bar after every key pressed which in itself works but the Problem here was that the selection jumps out of the Input field and onto the search button and there is also no Input in the search field.
Option 1: Programmatically clicking the search button
defining the Elements on the page
var dataGrid = document.querySelector('.mx-datagrid.mx-name-grid1');
var itemsSelect = dataGrid.querySelector('.mx-grid-search-input.mx-name-searchField1')
var searchButton = dataGrid.querySelector('.mx-grid-search-controls > button.mx-grid-search-button')
defining the function
function clickSearchButton() {
searchButton.click();
};
triggering the function with every Change in the input
itemsSelect.onkeypress = function(){clickSearchButton};
Option 2: Programmatically hit Enter
It's Pretty much the same Code as above and the way I would prefer it.
I tried many variants but the only Thing I want in the end should look like this:
itemsSelect.onkeypress = function(){*call a function to programmatically press enter*};
I tried Solutions from all over the place for example:
Is it possible to simulate key press events programmatically?
I want to press enter key by programmatically when user do some stuff in js
and many other Sources, some claiming that it is not possible because of security reasons. Is that true?
I'm trying to solve this since around two weeks, with Pretty much no success. Have I overlooked anything, is there another solution that I did not think of? Not using Mendix is not an Option. It's for a huge Project at work.
First, figure out the class and the id of the textfield and the button you are interested in. Usually those start with mx-name- prefix. In this example they are called mx-name-confirmPasswordInput and mx-name-confirmChangePassword.
Then, use the HTML Snippet custom widget to insert this piece of Javascript in your page:
(function() {
document.addEventListener("keydown", function(e) {
if (e.keyCode !== 13) return; // ignore if the pressed key is not 'Enter' key.
var inputField = document.querySelector(".mx-name-confirmPasswordInput input");
var btn = document.querySelector(".mx-name-confirmChangePassword");
if (inputField && btn && document.activeElement === inputField) {
inputField.blur && inputField.blur(); // not necessary any more in 7.22 and up
btn.click();
}
});
})();
That should do the trick!
In my JavaScript/jQuery code, I have a text field that I run an event when the text changes using the keyup event. However currently I only account for changes done using the keyboard.
Is there a way I can detect when a text field text changed because the user did a right click and clicked on cut or delete or paste or undo?
Note: This needs to work in IE9, and preferably Firefox and chrome, but definitely needs to work in IE9.
Thanks
jsFiddle Demo
Use jquery to bind an input event to the element like this:
$('#myInput').bind('input',function(){
//use this for the input element when input is made
var inputValue = this.value;//for example
});
As a start, this is not really the correct way to do it. But if you react on the mouseout event of a input you will most likely get it to behave the way you want.
$('#input').mouseout(function(){
if($('#input').is(":focus"))
console.log("Right-click");
});
Though it is to note that this might not work as well on textareas since they tend to be larger and the mouse might not be outside of it when the contextmenu has been clicked.
Note: Other than #Travis J that react to all interaction, this will (probably) only trigger an event on rightclick (and regular mouseout).
I'm making a grid control in HTML/JS and I'd like it to behave as much as possible like Excel. I've got most of the navigation and editing done already but there's one thing I can't figure out and everything I've found online didn't work in my case.
First I'm going to explain a bit how I've implemented it:
I've made the grid using a table and inserted a textbox in each td. The textboxes do not get the focus unless you double click in the cell (much like in Excel). In other words, clicking a cell simply select it and you can edit it by double clicking. You can navigate around by using the arrow keys, this was done by attaching a keypress event handler on the document.
Now, when a cell is selected, I'd like to be able to start editing it simply by typing. To do this, I added some code in my event handler that controls the navigation that checks if the user is typing visible characters (e.charCode != 0) and set the focus in the textbox of the selected cell. That works fine except that the first character the user types isn't received by the textbox. Apparently .trigger is the way to go; here's what I've tried so far
self.editCell.trigger(jQuery.Event('keypress', {which: e.charCode}));
I tried passing more parameters like keyCode, charCode... etc without success.
So what would be the best way to pass the keystroke to the input control?
The only behavior that you are changing is that you want to navigate between other cells with the arrow keys, correct?
Instead of whitelisting actions, why don't you just let the native code handle the heavy lifting and only detect the usage of the arrow keys?
something like:
function cellKeyDown(e) {
if (e.keyCode > 36 && e.keyCode < 40) {
// select a new cell
}
}
I need to detect keystroke combinations in one active (focused) element. However when I have focus on another element and the same keystrokes are pressed, the action shouldn't be fired.
I seem to have trouble doing this. Any help will be appreciated.
Thanks.
You could check out my jQuery plugin that would allow you to do this by selecting the element then picking the key like:
$('input').jkey('alt+a',function(){
console.log('You pressed alt+a!');
})
Docs:
http://oscargodson.com/labs/jkey/
Source:
https://github.com/oscargodson/jkey
I have a DataTable in YUI. I'm trying to get the table to ignore all keyEvents. I've tried these methods:
YAHOO.util.Event.addListener(singleSelectDataTable, "keydown", function(oEvent) {
YAHOO.util.Event.stopPropagation(oEvent);
});
OR
YAHOO.util.Event.preventDefault(singleSelectDataTable.tableKeyEvent);
OR
singleSelectDataTable.subscribe('tableKeyEvent', function(oArgs) {
YAHOO.util.Event.preventDefault(oArgs.event);
});
I've looked at a couple of YUI examples to intercept click events, but they don't analogize to this specific scenario. I created a standalone HTML test file if that will help: http://pastebin.com/khfR4Stk. The foundational problem is that we don't want to support arrow key up or arrow key down in our tables; it's a scrolling table and in order for it to work properly we would have to adjust the scrolling thumb once the selection goes past the 'shown-window'.
The only other solution I could think of is to subscribe to the tableKeyEvent and then if the keypress is up-arrow, then unselect the newly selected row, selecting the previous row, doing the appropriate analogue for a down-arrow (basically undoing what the keypress just did). This didn't seem like the right solution…
The tableKeyEvent is raised after the up/down arrow key has been handled. So trying to stop that event will not help.
Looking at the _onTbodyKeydown function of the DataTable widget, I noticed that setting the selection mode to an invalid mode disables key arrow key navigation. Luckily it doesn't seem to break the other selection handling. At least not in your example.
So just change selectionMode:"single" to selectionMode:"" and you should be fine :-)
(Of course there is no guarantee that this will work in future versions)
Try creating the equiv of this onclick
function noenter(evt)
{
var k = evt.keyCode||evt.which;
return k != 13;
}
Get the syntax for getCharCode and tell the script that when it receives input, it needs to deny it.
can't you just add an eventhandler that returns false to the keydown event?