Develop Reference

Angular: Prevent blur of input field if button is clicked

So, I have an input field for a text search. It can be triggered by pressing enter or clicking a button.
Now I'd like to add the feature that if you type "ABC", press enter, it triggers then search; and then when you add a couple of characters (e.g. "123" so you get "ABC123") but leave the input field without pressing enter, I'd like to revert the content of the input field back to "ABC", to show the user that that was the last search term.
I've implemented that with (blur)="resetInput()" on the text input, however the problem is that if the user clicks the button (after adding "123" to "ABC"), blur will trigger as well, which causes the input to get reset (to "ABC") and then the search gets executed afterwards (with "ABC" instead of "ABC123").
I've read that this is due to the order of which click and blur are being executed, and that you could circumvent that by using mousedown instead of click on the button, but that would change the behavior of the page, because the search would get executed on mouse down instead of mouse up (which is what happens if you use the (click) event)
Is there an alternative to this?

Thank you all for your answers, I have solved it now by calling event.preventDefault() on mouseDown which will block the blur event and allow the (click) event being executed with the unchanged input text.

This could be a work around if you are fine to have a very short delay in resetting the value on blur.
searchClicked = false;
// Handles the Search Button Click
handleSearchClick() {
this.searchClicked = true;
setTimeout(() => {
this.searchClicked = false;
}, 150);
// code to invoke the search
}
resetInput() {
setTimeout(() => {
if (!searchClicked) {
// reset here
}
}, 100);
}

Need to assign an event listener to the tab key using keycodes in JavaScript?

I have currently an eventlistener listening for when a user enters an email address in a textbox on an html website. It then displays an alert when it detects an email address is being entered. Currently I have set it up whereby it detects the event blur then checks whether it meets the regex then an alert will display. This creates many alerts and is not very accurate as the alert
I need the eventlistener to listen for when the tab key specifically is pressed. I know I need to use KeyCodes but have not used them before. This eventlistener is currently working dynamically as it is a Firefox AddOn that scans a webpage so the eventlistener is not specifically attached to a specific input box.
Code:
vrs_getWin.document.getElementsByTagName("body")[0].innerHTML = bodyContents;
var inputFields = vrs_getWin.document.getElementsByTagName("input");
for(inputC=0; inputC < inputFields.length; inputC++) {
var elementT = inputFields[inputC].getAttribute("id");
inputFields[inputC].addEventListener("blur", function(){
var emailPattern = /(\w[-._\w]*\w#\w[-._\w]*\w\.\w{2,3})/g;
var resultEmail = emailPattern.test(vrs_getWin.document.getElementById(elementT).value);
if(result) {
prompts.alert(null, "Test", vrs_getWin.document.getElementById(elementT).value);
}
}, false);
}
Any help with this will be much appreciated.

I think from a UX stand point, I would not recommend using a javascript alert to notify the user of a problem, especially if you want the notification to happen when they have completed a single form input. The blur event would be my recommendation, and use some other visual cue to notify the user.
But, if you want to go with the tab key, the event your looking for is 'keydown', or 'keyup'. To use it you listen for the keydown event then check if the event.keyCode == '9'. (tab key)
document.addEventListener('keydown', function(e){
if( e.keyCode == '9' ){
alert('You pressed the tab key.');
}
}, false);
To get the keycodes of keys I like to pop open a console and type in:
document.addEventListener('keydown', function(e){
console.log( e.keyCode );
}, false);
Then when you press a key, it will output the keycode for that key.

Button press and hold for action in Android PhoneGap

I'm need to preform a specific action in my app if the user presses and holds a button for a few second, if the user removes his finger from the button before the delay runs out, then this action will be cancelled. I use 'ontouchstart' event for the press.
Is there any way i can achieve this using html and javascript?
Thanks.

Here is a code snippets to achieve this particular requirement,
var pressTimer;
$("#btnClick").mouseup(function(){
clearTimeout(pressTimer);
return false;
});
$("#btnClick").mousedown(function(){
pressTimer = window.setTimeout(function() { ... your code here ...},time_delay)
return false;
});

Search for keyup and keydown events in javascript
useful link:
http://www.webmonkey.com/2010/02/javascript_events/#keydown

Form submission on pressing enter button

I am handling ajax suggestions using keyboard and mouse, it is capturing every keyevent except enter key(13). What I want is to get the "selected suggestion value" into the text box. For this I am handling keyevent = 13. Now the problem is when I am pressing enter key, my form get submitted instead of going into the "if block" where I am checking (keyevent = 13).
I am using struts <html:submit> tag to submit my form. I guess, the browser automatically set the focus into first <html:submit> tag that comes in its place. How to defocus this? I tried setting focus at other fields but trick doesn't work.
The other way is, I can use simple <html:button> and can get the things working, but the system already using <html:submit>. So, getting approval and modification is quite hectic.
Code for submit button:
<html:submit styleClass="btn" property="method.saveVisaRequestForRMG" onclick="bCancel=false" styleId="submitBtn">
and code for event handling:
// Handle ENTER key
case 13: handleSelectedItem(obj, container, cur);
ev.cancelBubble = true;
break;
How to come out of this problem? Please suggest me.

If you use jquery there is a simple way to handle enter press events:
$(window).keypress(function(e) {
if(e.keyCode == 13) {
e.preventDefault();
alert('Enter!');
}
});
After you prevented the default event you can do whatever you want for example posting the data into the server, saying hello or whatever :)

Try to return false; to cancel the event handling of the submit?

Do you have something like:
onsubmit="return formValidator()"

Detect the cursor location

I have 25 components which includes [textarea, textfile, radio, combo, etc...] and I have written a key event so that when "ENTER" is entered, I call a function which will submit the page.
Now my page is getting submitted when I press enter, even in the textarea which should not be. So is there any way that I can not submit the page if it is pressed in the text area?
This happens only in IE7 and IE8; it works properly in all the other browser.

you could probably detect if any of the textarea, etc is not filled out/emtpy/unset. if all of them are filled out properly, send the form.

Did you attach the "key event" to the whole form? The whole DOM? if you did that's a normal behavior.
If you want the "Enter key" to submit the page when the focus is on the submit button then apply this functionality in the onsubmit event - there of course you can perform all the validation you need.
If you just want to exclude the enter key event from the text area - perform a simple check if the the focus is in the textarea that momemnt.

The default behaviour of a form is to submit if the user hits enter inside the form unless the focus is on a textarea, so what you want is the default behaviour. Remove whatever code you have that currently handles keypresses for the form and you'll have what you want.

I'm not sure if this will suit your needs, but you can disable the enter key inside the textarea with something like this:
$(document).ready(function(){
$('textarea').keypress(function(e){
var key = (window.event) ? e.keyCode : e.which;
if ( key == 13 ) {
return false;
} else {
return true;
}
})
})