I want to ask a question about the JavaScript event. I have an <input type="text"> box and I have applied the autocomplete function on that box.
I know that when the user types the char like "sta" in the box and the JavaScript will call the keypress event, which also calls the autocomplete function.
However, I want to know what event of the JavaScript will be called what I use the mouse to click/click the keyboard "enter" to the wanted item from the autocomplete list.
The mouse clicking event is called onclick, the enter key event is called an onkeyup event. For the second one, you need to make sure the enter key was pressed, though:
someElement.onkeyup = function( e ){
var e = e || window.event;
if( e.keyCode == 13 ){
// enter was pressed!
}
};
However, I want to know what event of the JavaScript will be called what I use the mouse to click/click the keyboard "enter" to the wanted item from the autocomplete list.
It sounds like you are looking for an event which triggers after text of the text box changes. If that is the case, the event fired is onchange.
That will take care if user select autocomplete option either via mouse or hits the enter button.
Related
I'm trying to listen to keyboard events in contenteditable and apply the same events to an input element (or applying e.keyCode to an input). I've tried this. Element.dispatchEvent will only trigger event listeners but don't seem to change the input value.
But it doesnt update the input value. I don't want to rely on manually modifying the input.value because i need to account for things like backspace.
contentEditableDiv.addEventListener('keydown', e => {
inputElement.dispatchEvent(e);
});
Reason why i need this:
When user enters a hotkey, i show a context menu so the user can continue typing and i can filter the list, i want to throw all those events into an input so that i can use the input value to filter through my list.
try this
document.onkeypress = (e) => console.log(e)
I have a form with multiple stacked <input type="text"> boxes, and I check for an "Enter" press on the form's keydown event, moving to the next input down if this happens, and returning false to prevent form submission. (Yes, that's the oldschool way... but I want to support legacy browsers).
form.onkeydown = checkEnter;
and
function checkEnter(e)
{
e = e||window.event;
var el, tag, typ, k = e.keyCode||e.which;
if ((k===13)&&(el = e.target||e.srcElement)&&(((tag = el.tagName)==="SELECT")||((tag==="INPUT")&&((typ = el.type)!=="submit")&&(typ!=="reset")&&(typ!=="button"))))
{
// focus next form element
// ...
return false;
}
}
The problem is that if I press down-arrow in an input and the autocomplete list opens, I can select a value from that list using the mouse as normal, but if I choose a value using the arrow keys instead and then press "Enter" to select that value, my event prevents this from happening in Firefox 61 and Edge 42 (but it does work as expected in Chrome 67). This makes autocomplete unusable without a mouse.
My question is: Can I block keydown events from triggering when the focus is inside the autocomplete history list, rather than inside the element itself? Or alternatively, can my event somehow detect that the autocomplete list is showing? I'd like "Enter" pressed while in the autocomplete list to perform its default behaviour, i.e. selecting the autocomplete entry.
Note that Chrome is possibly avoiding the issue because the value in the <input> changes as you navigate the autocomplete list.
Note that changing to using the keypress event (instead of keydown) makes no difference (at least in FF 61).
Turns out that what was interfering with autocomplete was not the
return false;
Rather, it was the part where I set focus to the next form element. This solved the specific problem I was having (note the change to keydown instead of keypress, it's necessary):
form.onkeypress = checkEnter;
and
function checkEnter(e)
{
e = e||window.event;
var el, tag, typ, nextEl, k = e.keyCode||e.which;
if ((k===13)&&(el = e.target||e.srcElement)&&(((tag = el.tagName)==="SELECT")||((tag==="INPUT")&&((typ = el.type)!=="submit")&&(typ!=="reset")&&(typ!=="button"))))
{
// nextEl = form element to switch focus to next
// ...
if (nextEl) setTimeout(function(){nextEl.focus()},0);
return false;
}
}
i.e. defer the focus change until after the keypress event has completed, using setTimeout().
So I answered my specific problem, of fixing autocomplete behavior in this case. But I still don't know the answer to the general question as I posed it, i.e.:
Can I block keydown events from triggering when the focus is inside
the autocomplete history list, rather than inside the element itself?
Or alternatively, can my event somehow detect that the autocomplete
list is showing?
For example, I have another page where I want an "Enter"-press in an <input> to perform a specific action, only not if it was pressed to select an autocomplete entry.
...So if anyone has a solution to the more general problem, please post it!
I am trying to intercept "Hide keyboard button" specific for Ipad in Javascript. I searched everywhere but could not find correct keycode for that.
I pressed any keys and I get a keycode map (for characters, but also for enter, space and delete..).
This is an example of what I want to accomplish
$( "#mydiv" ).on( "keydown", function( event ) {
if (event.which == xx){
//do something
}
}
where xx is my keycode on 'hide keyboard button'. No method is called to the delegate when the button is pressed nor a KeyCode.
I took a look at detect iPad keyboard Hiding button, but I get a solution on a different level (with Xcode), but I need a solution with Javascript.
Hope someone could help.
I found a workaroud for iPad IOS7. I will test on IOS8 to make sure it works. So basically I create a listener on every FOCUSOUT event (for all my texts) and I call my function.
It fires when you have your keyboard open and when you close your "keyboard". It doesn't fire when you select another text field or button, because it targets on null. If you use in combination with keydown, you can save multiple value and call your submit function only when you release your keyboard.
It works for my specific project.
document.addEventListener('focusout', function(e) {
if (e.relatedTarget === null) {
alert("close keyboard without click on something else");
callYourFunction();
}
});
p.s
I'm pretty new here in SO, so I don't know if I can reply myself or I should edit my question or make a comment.
I have a search box whch is a text type. it has a click button, which initiates the Find().
how can i do the find by hitting enter inside the textbox
If your text input is inside of a form element, you can attach an onSubmit (or jQuery .submit()) event handler to the form element. This event will fire when the user presses enter while inside the text input
Use ng-keypress on the input element and check for enter key code:
<input type="text" ng-keypress="($event.which === 13) ? Find() : void(0)" />
This is assuming that jQuery has been loaded. Otherwise, you might want to use $event.keyCode, but doing it in a browser compatible way would be tricky.
If you have a directive which contains this template, then you should catch this event in the link function and call Find there. Otherwise, putting the input button inside a form and defining a on-submit on the form element. Do check for IE compatibility though, I remember IE7 at least needs a hidden <input type="submit" /> in the form for the enter key to submit the form.
document.onkeydown = function(evt) {//when key is pressed
evt = evt || window.event;
if (13 == evt.keyCode) {//if key was enter
if (document.activeElement.className== "search_input"){//if the focus is on your input (in this case search_input)
Find() //call your function
return false;//cancel enter
}
}
}
I generally have very good luck with Angular-UI. The ui-keypress directive should serve well in this case. http://angular-ui.github.io/ui-utils/#/keypress. The keycode you want for the Return/Enter key is 13.
In my asp.net solution, I have a text input box and a search button. There is a onkeyup jquery event on the text input field so it automatically clicks the search button when the user presses a key. You can also manually click the button.
But what I noticed is that if you are typing, and then you press ENTER key, it will trigger the on onkeyup event. How can I disable the function from occurring if the ENTER key was pressed, or maybe detect if it was the ENTER key and then have an if statement or something.
Another thing that is happening is, if there is something wrong with the text in the input box, I display an alert message box. Then if you press ENTER to close the box, it will somehow trigger the onkeyup event, which displays the alert box again...
Thanks.
add if (evt.keyCode != 13) in front of all actions in the function :)
You can use .which on the event to determine the KeyCode for the key that was pressed (ENTER = 13):
$('#input').keyup(function(event) {
if(event.which == 13)
{
//respond to enter keypress
}
});
Also you can use this site to easily find info about keyups/downs etc for different keys.
Hope this helps!
Hope this helps.
<script type="text/javascript">
function stopRKey(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((evt.keyCode == 13) && (node.type=="text")) {return false;}
}
document.onkeypress = stopRKey;
</script>
The onkeyup event is triggered after an alert when you close it with ENTER because the alert is close onkeydown, and so after it's closed and the document regains focus, when you release the key, the textbox's onkeyup event will be triggered.
As previously stated, you can add an if (event.keyCode != 13) to test if the ENTER key is not the key that was pressed.
A better solution would be to use a different event.
Instead of onkeyup, use oninput.
The oninput event is triggered when the user changes the textbox's value.
The event will fire only when the user writes something in the textbox or deletes something. It will not go off when the ENTER key is pressed, or when any other key that doesn't change the textbox's value (like arrow keys) is pressed.
The oninput event might be a better choice for the functionality you're searching for.
*if you're using the oninput event you don't need the if mentioned before.
A fiddle for demonstration of the oninput event: Here
For future reference I found this useful site:
http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
Good luck!