We Keep Coding

How to get data from the html input after the user has pressed enter or clicked elsewhere?

Js has a built-in function that allows you to retrieve data from an input when a user enters something into it: input.addEventListener("input", myFunction()).
But it does not suit me, because it is executed every time the user enters at least one character. Instead, I need an approach in which the function would be called only when the user typed something and then pressed enter or clicked on a page in different place.

You can use the following methods for this:
use onblur for the input elements. This will trigger once the user clicks anywhere outside of that input box.
use onsubmit for the form. This will trigger when the user presses enter or submits the form in anyway.

You can use the focusout event which fires when an element is about to lose focus and for the enter key you could check the event.key within the keypress event which is fired when a key that produces a character value is pressed down. like so:
input.addEventListener("keypress", function (e) {
if (e.key === 'Enter') {
// code for enter
}
});
focusout - https://developer.mozilla.org/en-US/docs/Web/API/Element/focusout_event
keypress - https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event

Vue prevent blur event

I have an editable input component, which has an isEditable state.
By clicking outside the input field, I use #blur event.
By clicking on the enter key, I trigger another event.
Both methods use the same logic, and after the logic finishes, I set the isEditable to false. In this case, somehow the blur event is triggered. (I guess because the input field disappears (I guess because it uses v-if="isEditable").
Is there any way to prevent blur to be triggered by changing the state programatically?

If hiding the div activates the blur event, then you can just make the keypress Enter event hide the div, your logic will be executed only once in both cases.
Before :
#blur="myLogic"
#keyup.enter="myLogic"
After :
#blur="myLogic"
#keyup.enter="willActivateBlur"
// methods
willActivateBlur: function() {
this.isEditable = false
}
Edit : Wait, did you say "click on the enter key" ?... I got confused, are you clicking or pressing a key ?
If your problem is using #blur and #click at the same time, a lot of questions were asked about this already, such as this one.

Conflicts of blur and submit/click events

I have two items
item1 is textbox
item2 is submit button
Now item1 has blur event in jquery. In that blur event I have validation and based on that validation if it fails user will have confirmation message.
So if user press yes he can proceed futher
if user press no that textbox will be blank and need to enter detail again.
So now my issue is that if user enter detail in item1 and directly click on item2, button's submit event rejected and item1's blur event called. So first time is rejected and user have to press 2nd time on button(This is the issue).
So how to know in item1's blur event if user click on item2 than I can proceed further with triggering item2's click event.

Consider this code
var $item1 = $('#item1');
var $item2 = $('#item2');
$item1.on('blur', function (oEvent) {
if ($item2.is(oEvent.relatedTarget)) {
// your blur is caused by click on $item2 a.k.a submit button
} else {
// your blur is caused by smth else
}
});
It checks where your focus was moved and you can add some specific boolean flag to use later on in your submit handler or maybe change your validation somehow.
Please note that blur event is event of loosing focus, focus can go away not only because of clicks, but also because of tab-navigation for example.
UPDATE:
added a jsfiddle http://jsfiddle.net/DbjQc/
Try focusing the text input and then clicking somewhere else. After that try focusing the text input again and then click the submit button - you will see how behavior changes.

Detect browser autoclick

I have some problems in implementing my jQuery plugin.
I need a plugin which shows me some element (popup) and hides it when i click out of bounds of this element.
I implemented this plugin. But I have problems with forms in popup. When I calculate coordinates of clicked element I use pageX and pageY properties.
But it is some interesting things when I try to submit form using ENTER key. When I push ENTER browser triggered 'click' event on submit button, but pageX and pageY of this button is equal 0. In event.target I see my button.
When I click submit button myself - everything is OK.
Question: how can I detect who clicked this button? User or browser? (without any spikes like detecting enter key on input or so on)
Additional: as you can see here events are different (when click on submit and press ENTER). But difference is so small... I see only that 'detail' property is set to 0, when we submit form by ENTER.
Detail property is amount of clicks on element for mouse event.
Is it only way to detect submission? Is it correct?

If you're binding a click handler to a click event and later calling the click programmatically as well as from a user click and want to differentiate the two events in the handler, you can check for eventObject.originalEvent which is set in the user click but not the .click() call.
Example:
$('#el').click(function(evt){ if(evt.originalEvent){ //user click } else { // .click() call } });

How about testing for pageX == 0 AND pageY == 0?
Or even better, assuming it is a form (it implies from your post), why not use .submit() rather then .click()?

Run javascript/jquery after text change but before submit

I have an input element on a form along with a submit button.
I want to run the change event on the input element all whenever a change occurs. The problem is if end user changes text and clicks submit button the code in the change event doesn't run.
Immediately after user clicks the submit button, the form submits (like the change is not getting time to run, the same occurs with blur or focus out).
My controls can be placed on any form, and I do not control the click event of the button.
Help please

If you're wanting to catch whenever input in a textbox is changed try this in the document.ready
$("input[type='text']").change( function() {
$("#SubmitButton").attr('disabled', 'disabled');
// check input ($(this).val()) for validity here
// after text is updated..etc, enable the button
$("#SubmitButton").removeAttr('disabled');
});

may be you want use event.preventDefault

Expanding on #Aleks G's comment, the best thing for you to do is trigger your change handling on more than just the change event. Beyond keyup, I've found you also need to be careful to handle pasting with the mouse (doesn't trigger the keyup or change event):
yourInput.bind('change keyup paste', function() {
// Your code
});