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
}
}
Related
I have this code that fills and focuses but I need to add an arrow down event as it will trigger list popup like pictured below. Can anyone help me with the line?
document.body.appendChild(element)
element.addEventListener('click', function(){
document.querySelector("input#generic_test_order_search.ui-autocomplete-input").value = '16048'
document.querySelector("input#generic_test_order_search.ui-autocomplete-input").focus()
})
})();
You can use the KeyboardEvent API. Use the keyup or keydown event - depending on which one suits you better, and look up the keycode (the arrow down keycode is 40). When the key is pressed, the event will trigger. You can use the website to check which keycode is linked to which key on the keyboard by clicking here.
I got the code below from the MDN web docs.
eventTarget.addEventListener("keyup", event => {
if (event.isComposing || event.keyCode === 229) {
return;
}
// do something
});
Not enough information. It might be better to provide full HTML...
(A bit connected question: Script to fill a value automatically in the webpage input box)
1 - The goal here is to get class of the suggestion dropmenu. And find children inside, and maybe another children inside, and then trigger click() on it.
Since it is pretty hard to guess the class names and the structure, here is a pretty much equal example of how to click on drop-down suggestion.
a) Here is Wikipedia. Open the link.
https://en.wikipedia.org/wiki/Stack_Exchange
b) Save the following code as a bookmarklet:
javascript:(function(){
document.getElementsByClassName('suggestions')[0].children[0].children[1].click();
})();
c) Then write three letters goo to the search in Wikipedia.
d) And finally trigger the bookmarklet. Then it will open up the second suggested link: children[1]. This is how it may work. You might try like this with your HTML on your own.
2 - There is a chance that making a bookmarklet might be a slightly better than appending an event listener, since all you need is to insert values.
Another option is Tampermonkey / Greasemonkey to trigger things even more automatically (in fact, this option is pretty much the same as a bookmarklet, and the code structure is absolutely the same and fully compatible).
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!
I have a .pdf document that contains custom links which run Javascript code.
There is no issue with the actual functionality of the working portion of the JS, but I do have one formatting/display problem that I havent been able to solve:
Is it possible to write JS that will alter the appearance of individual links as they are clicked?
I know I can programmatically change the appearance of all links on a page by looping through the doc.getLinks result and applying formatting changes to each element of the getLinks array. But I don't know how to refer to a specific link, as/after it's clicked, either by referencing that link's index location within the getLinks array, or by referring to it by any other name, handle, etc.
I would think that this is probably possible to do, but I'm at a loss.
Thanks in advance for any pointers!
EDIT: One thing to clarify...I can do everything I need to do for a single button. That is, I can manually find the button name, and manually enter the JS code to change the appearance of that particular button. To do this, I need to physically look up the name of the button using a few mouse clicks, and then hard code that button's name in my JS getField command. This requires different code for each and every button.
Is it possible to accomplish the same function using the same code for each and every button?
My ultimate objective is to be able to reproduce this function on a series of .pdf files that will, jointly, have thousands of individual buttons. So any manual component of this process will make implementation impractical.
I should have originally phrased the question in terms of, is it possible to write JS code that can automatically detect the name of the button which is calling the code? (ie, how would I implement a self-referential feature for a generic button?)
As wished by the OP…
When a script should refer to the field on which it is running, the field object to use is event.target.
An example:
You have a button which, when clicked, should change the width of the border between 1 and 3. The mouseUp event would containt this piece of code:
if (event.target.lineWidth == 1) {
event.target.lineWidth = 3 ;
} else {
event.target.lineWidth = 1 ;
}
Or another example: when the number in the calculated text field is negative, it should be in red, otherwise in black:
In the Format event of that field, you would add:
if (event.value*1 < 0) {
event.target.textColor = color.red ;
} else {
event.target.textColor = color.black ;
}
And that should give an idea on how to use event.target.
I've been struggling with getting a field working properly. This field displays a lot of data, and the user wants to select and copy a large portion of it. The data is basically a big list and the user wants to select all entries below a certain point. The way that they achieve the selection is by highlighting a word or two in the first entry they want then pressing ctrl+shft+end to select everything to the bottom. This was working until a new feature on the page was added below the contents of the list. Now the hot key select also selects the contents of the rest of the page.
The current implementation is simply :
<div id='diff-contents'>[content here]</div>
<div id='trailing-content'>blah blah blah...</div>
I have tried a read-only input field:
<input id='diff-contents' value='[content here]' readonly/>
This works in Firefox to some extent however the contents contains HTML, and the input field show html literally, not rendered. In addition to that Chrome doesn't show a blinking caret and the hot keys do nothing, so the input field is sadly not viable for me in this situation.
How can I make a selectable field that maintains focus for the cursor and shows a blinking caret but is not editable using javascript, CSS, HTML, or JQuery?
Edit: jsfiddle example that should clarify a bit.
Look at these questions how to determine the current selection: Getting selected text in a browser, cross-platform
The next step is to create a new range which starts at the end tag of #diff-contents. With this information, you should be able to extend/modify the existing selection.
I suggest to either add a button to the UI or use JavaScript with a key-press handler to trigger this code.
With that, the correct amount of HTML should be selected. Users can then copy that into the clipboard with Ctrl+C.
#Aaron Digulla mentioned key listeners, and that got me thinking about simply stopping the events.
The diff-content element is still a div but it is set to editable. This gives both HTML rendering and a blinking caret.
$(this).keydown(function (event) {
if (document.activeElement.id == 'diff-content') {
if (!allowedKeys(event.keyCode)) {
//The only other key presses that should be processed are ctrl+c (keycode 67) and ctrl+a (65)
if (!event.ctrlKey || !(event.keyCode == 67 || event.keyCode == 65)) {
event.preventDefault();
}
}
}
});
The javascript adds a keydown event listener to the entire page. This is necessary since if you just add it to the element, the event has already propagated through the rest of the page and will still be processed, and this was causing funny issues for me. Next we check if it's the diff-content that is active since we want other input elements to still operate normally. Then we check if the key event is an allowed key (tab, home, end, arrows). And finally, check for ctrl+c and ctrl+a and allow those too. I tried event.stopPropogation() and event.stopImmediatePropogation(), and neither of those worked, but preventDefault did.
Lastly, I added style="outline-style:none" to the element so that the blue border would not appear when the element has focus.
The only issue that I have yet to resolve is that since it is editable, the browser still allows you to select and then right click to either cut or paste, which will allow you to alter the text.
Here is the final jsfiddle for what I am using: http://jsfiddle.net/wh3nzmj8/12/
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?