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).
Related
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'm implementing a couple of shortcut keys for my MVC web app and I'm running into an issue. The app allows users to answer multiple choice or short answer questions, and I'd like to make multiple choice questions answerable by just pressing 1,2,3,4 etc. Here's what I have right now:
$(document).on("keypress", function (e) {
self.someKeyPressed(e);
});
[...]
someKeyPressed: function(e) {
// locate all the multiple choice buttons in this view
var buttons = this.$el.find('button');
if(_.contains(_.range(49,55), e.which) && buttons.length) {
index = e.which - 49;
var answer = $(buttons[index]).text();
this.answerQuestion(answer);
}
e.stopPropagation();
},
This works fine, except for the case when a multiple-choice question is immediately followed up by a short answer question. In this case, the same <div> used to contain the elements, is instead replaced with:
<input placeholder="answer goes here" autofocus="autofocus">
And here's where the problem is: whatever shortcut I used on my keyboard to answer the multiple choice question shows up in the as if the user had typed it in, even though that view didn't exist at the time of the keypress. I tried to wire up an event on "input keypress" and that doesn't even go off in this situation. Interestingly enough, removing autofocus fixes the issue, but unfortunately I need it for for the user experience to be pleasant.
What's going on here? Is there anything I can do to prevent the keypress from making it into the input until I'm ready?
Edit: it looks like adding e.preventDefault() right after e.stopPropagation() did the trick. Without it, the shortcut number would be typed into the input as soon as the jquery event dispatcher logic completed, but no sooner.
It looks like calling e.preventDefault() does the trick, even though I'd still love to find out one day why exactly this makes a difference.
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 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?
I have a form and it has 4 input elements. if the user enters just two entries and clicks anywhere on the screen (out the form)...i would like to save the details..it is like auto-save.
I have id of my form..i want to compare with form id of the current control on the screen..so that i can ssave the data if both form ids are different..
could you please tell me how can i get the form id of current control location on screen (some times the control could be outside the forms..in that case form id of current cotrol location would null)... but how can i determine that in javascript.
please suggest...
Many Thanks in advance,
Jack.
That's an interesting question.
Well, if you didn't think a second (as I admittedly did), you would just hook on the blur event of the HTML <form> element in question.
<form onblur="autosave(this)">
However, the HTML <form> element doesn't support that event. Too bad.
I then thought about jQuery's new 1.4 focusout() event.
$('form').focusout(function() { autosave(this); });
Unfortunately that event get fired as well when you just jump (tab, click) to the next input field inside the same form. Not so nice, it'll probably be too expensive to autosave on every fieldjump. The same effect as with an $(':input').blur(function() { autosave(this.form); });.
I then tried the other way round using focusin():
$('form').focusin(function() {
$(this).addClass('focused');
});
$(':not(form)').focusin(function(e) {
if (!$(e.target).parents('form.focused').length) {
var form = $('form.focused').removeClass('focused');
autosave(form);
}
});
Strangely enough this works in IE only and not in the other browsers. It'll be another IE bug/quirk that focus is supported by all elements other than input elements.
Your best bet will probably be hooking on the click() event instead.
$('form').focusin(function() {
$(this).addClass('focused');
});
$(':not(form)').click(function(e) {
if (!$(e.target).parents('form.focused').length) {
var form = $('form.focused').removeClass('focused');
autosave(form);
}
});
This works fine. You can find here a live demo.
Note that I don't mean to push you jQuery (a JS library which insanely eases HTML DOM traversion and manipulation) through your throat or so, but I don't see nice ways in plain JavaScript to achieve this without writing 10 times as much as code here.