We Keep Coding

Client side form validation for Copy/Pastes via Right-Click

I'm using the following line (Struts1 syntax) to display a text field and allow some client side checks via Javascript.
<html:text styleId="myField" property="myProperty" onkeyup="function()" />
My intention is for a message to appear and a dropdown to disable whenever there is text entered into the form field (regardless of content). The onkeyup attribute works fine for all cases except for when the user pastes in text using mouse right-click.
It doesn't appear that onmousedown and onmouseup events notice right clicks. The same goes for onfocus.
onchange only makes the check when focus is lost, however the user can circumvent this by pasting data and clicking the form submit (same for onblur).
onmouseout somewhat works (I can break functionality) in IE8, but doesn't work at all in Chrome v41.0.2272.89
Has anyone encountered client-side form checks on Mouse-Right Click? I'd like to cover this use case across browsers and cannot count on the end user to always paste via keyboard shortcuts.

I went with a jQuery solution as suggested by Aleksandr M above in comments.
Initially I had this function:
$(document).ready(function(){
$('#myField').bind("paste",function(e) {
toggleFunction(); //preserve already existing function in use with other cases
});
});
But then came to find that while the function would run following the user's paste, it would run prior to the text actually being pasted.
Example:
User pastes (Right-click > paste OR Ctrl+V);
Function is called and executes, condition checks made
Text is pasted.
So instead I replaced the function call in the jQuery with my intended end result, making some additional changes elsewhere so that my assumptions are met.
But those conditions aside, the below ends up doing what I needed.
$(document).ready(function(){
$('#myField').bind("paste",function(e) {
document.getElementById("dropdownID").disabled = true;
document.getElementById("showMessage").style.visibility = "visible";
});
});

Run Code on Click Button or Update Field, but Not Both at the Same Time

I want both:
<input onchange='fncChkVrification()'>
<button onmouseup='fncChkVrification()'>Hit Enter after pasting or typing the Code. Or Click Here.</button>
For ease of use, I want the user to be able to hit Enter after an input text box is filled in, and have code run. The problem is, that the user may need to come back to that input field later, and re-run the code with the same value.
For example:
User enters a verification code in the input field and hits the Enter key.
But they haven't signed in. So the user gets a message stating that they haven't signed in.
They sign in, and come back to the input field to run the verification, but when they tab out of the field or hit Enter, no code runs because the verification code is the same.
The code only runs if the value changes. I'm assuming that the browser records and tracks the value and whether it's been changed.
I could:
clear that field if there is an error, and make the user enter the verification code again. But I'd like to avoid that.
Only use a button, and not the onchange event.
I want to give the user both options. I've read that JavaScript will not simultaneously run two functions at the same time, but if the code is very short, and runs very quickly, will it get run twice, not simultaneously, but immediately in sequence?
If for some reason the code runs a second time, it might not affect the outcome at all, but I'd like to avoid unnecessary duplication.
The code DOES run twice! If I click the button, both events trigger. The onmouseup from the button, and the onchange from the input field.
window.countTimesRun = 0;
window.fncChkVrification = function() {
console.log('fncChkVrification ran: ');
countTimesRun = countTimesRun + 1;
console.log('countTimesRun: ' + countTimesRun);
var getVrfyChkCode = document.getElementById('divForOnHoldKey').value;
google.script.run.withFailureHandler(onFailure)
.withSuccessHandler(rtrnFromVerify)
.verifyCode(getVrfyChkCode);
};
Technically, JavaScript might not be running simultaneously, but the code is so short, and so quick that it's running twice, back to back.
I could somehow pause, or track, or keep a timer. But that just seems like way to much overkill to make it worth it. I may need to just have a button, and no onchange event. Unless someone has a simple solution. I'm not using jQuery.
If JavaScript had an onexit event for an input field, that would probably solve the problem. But as far as I know, that doesn't exist.
I thought maybe changing the button onmouseup event to onclick might do something, but that doesn't work.
I just tried using onblur and that created a lot of very undesirable situations. The code runs when the field looses the focus, but then the cursor stayed in the input field. So it got stuck in a loop if I clicked on a new browser tab. The code would run, the new browser tab would NOT load, and then the focus went right back to the same place!
I experimented with the button getting the focus, but when I hit Enter, the cursor does not move to the next tab element. If I click Tab, the button gets the focus, and the code runs. But if I hit Enter, nothing happens.
I've come to realize, that the solution to my problem is by controlling what happens when the user hits the Enter key. So, in a sense, this is a duplicate question to making code run when the Enter key is pressed. Which I didn't realize at the time I posted this.
I found a solution. The key to the solution is they keyCode check. Here is a working jsFiddle: Run Code on Either Enter Key Press, or Button Click, but not Both

It sounds like you have gotten yourself in a muddle here. If I have understood correctly this fiddle does what you are describing: http://jsfiddle.net/wR32h/
This is the meat of it:
FormManager.prototype.initialize = function () {
this.elements.input.onkeyup = this.handleInputKeyup.bind(this);
this.elements.button.onclick = this.handleButtonClick.bind(this);
};
FormManager.prototype.handleInputKeyup = function (evt) {
// check to see if the key was enter
if (evt.keyCode !== 13) {
return;
}
if (this.checkState()) {
this.validateCode();
} else {
alert('you need to log in before validation can take place');
}
};
FormManager.prototype.handleButtonClick = function (evt) {
if (this.checkState()) {
this.validateCode();
} else {
alert('you need to log in before validation can take place');
}
};
We can eliminate any problems which occur as a result of blur and change events by capturing the onkeyup and simply returning out if the key wasn't enter.
With this approach you shouldn't have multiple events firing etc... It is hard to see what exactly is going wrong without more of your code but hopefully I have understood correctly and covered your question.

detect on change of text box in jquery

I am having a little confusion in jquery regarding an onchange event of a text box. I am having a text box and a small jquery snippet to detect if the user has pasted something:
$("#testid").bind("paste",function(){ do something.})
Is there any function like paste which detects whenever there is a change in the text box? i.e, when a user inputs something, immediately call a function (not on submit), and do something. Any help is appreciated

Use .change function.
$("#testid").change(function(){
//do something.
});
This works, if
user pastes something
user types
user deletes text
into/from the textbox. Globally, when textbox's value changes.
Jquery Documentation

You can use this. also check JSFiddle attached.
$("#txtBox").on('change', function(e){
alert('txtBox has changed: ' + $(this).val());
});
http://jsfiddle.net/AUSd6/

If you using latest jquery library, below script can be helpfull
$( "#testid" ).on( "change", function() {
//do something.
});
For Detail visit http://api.jquery.com/on/

Following are 3 methods those are very helpful if you have to detect changes as soon as user presses keys on keyboard. Keydown,Keypress,Keyup
Keydown--> would be called when your keyboard key is down.
Keyup --> called when user leaves the key after typing the character.
keypress--> is called as soon as user press the key on the keyboard.
There is change method also but this is called when someone after typing the word in textbox or any field clicks any place on the page or moves to next input field.
here is code how to use them.
$("#yourcontrolId").keyup(function(){
});
similarly you can use others 2 as well. every function have two overloaded versions

jQuery keyboard events

Using jQuery, I would like to capture a keyboard event that is:
before the user lifts their finger from the key
after the characters from the keyboard event have registered in the input box.
To clarify, view this example. When keypress fires, the input value has not been updated yet.
[Edit]
Apparently I wasn't clear as to what I need.
The function must be called before the user lifts their finger up from the key, but after the key's character is placed in the input box. So the following do not work:
keydown: at the keypress event, the value in the text box has not been updated
keypress: at the keypress event, the value in the text box has not been updated
keyup: this is called when the user lifts their finger, which is too late.

You can use the input event, which works in recent versions of all major browsers:
var input = document.getElementById("your_input_id");
input.oninput = function() {
alert(input.value);
};
Unfortunately, it doesn't work in IE <= 8. However, in those browsers you can use the propertychange event on the value property instead:
input.onpropertychange = function() {
if (window.event.propertyName == "value") {
alert(input.value);
}
};
SO regular JavaScript answerer #Andy E has covered this in detail on his blog: https://web.archive.org/web/20140626060232/http://whattheheadsaid.com/2011/10/update-html5-oninput-event-plugin-for-jquery

Use keyup event, an example on jsFiddle
$("textarea").keyup(function(e){
alert($(this).val());
});
It happens after you lift the key. I don't know what you want to achieve, but you can store the state before lifting the key (on keydown or keypress) and restoring later if needed. You also can stop the output in the keyup event using e.preventDefault(), so even after the key is up it will not register the values in the area.

You could listen on keydown event and store the value in a variable. That variable would have the value as it was before the new input, and the new input would be included in the keyup event
UPDATE:
Ok, I misunderstood your requirements, but there isn't an event that would meet your needs. The only thing I can think of to simulate this behaviour is the following:
listen on keydown/keypress
get the value from the event object (get event.which, then convert it to actual value)
use a variable like I mentioned in the original advice and concatenate the new input to it
Here is a fiddle: http://jsfiddle.net/HpXuU/13/
This is obviously not a perfect solution, as it needs some (one might argue unnecessary) work to get done right. I would advise to rethink your needs, but if this behavior is absolutely what you need, I think this is a step in the right direction.

You can use setTimeout:
$('input').keypress(function() {
var that = this;
setTimeout(function() {
// read that.value
}, 0);
});
Live demo: http://jsfiddle.net/HpXuU/8/

Suppress Safari’s “You have entered text…” warning?

Safari helpfully (?) prompts before closing a tab or window when text has been entered into an input.
There are some cases where, as a web developer, this isn’t desirable — for example, when the input is a live search where the user has probably already gotten the results he’s looking for when the window is closed, even though there’s still text in the field.
How can I let Safari know that text in a particular input doesn’t need its protection?

It seems like you are able to disable this warning for an entire page by having an onbeforeunload handler on <body> (even an empty one will do). For example, the following will not produce the warning:
<body onbeforeunload="">
<form method="get"><input></form>
</body>
I'm not sure if this is the intended behaviour, or a bug.

I think I've got a solution to this problem, though it's unquestionably a hack (i.e. if Safari changes how this feature is implemented, it could stop working). Shown here with a touch of jQuery:
$('.unimportant').live('blur', function(){
var olddisplay = this.style.display;
this.style.display = 'none';
this.clientLeft; // layout
this.style.display = olddisplay;
});
Demo (try typing in the "unimportant" field, click somewhere else on the page, then close the window).
In short:
Hide the input
Trigger layout
Show the input
You can also change the value of the input, trigger layout, and change it back.
The one limitation here is that cleaning the input has to be done explicitly. In this case, it will be dirty until blur. This works well in my situation, and probably in many others, since the input will be protected from an accidental window close until something else on the page is manipulated (e.g. a link is clicked). You could choose to run this on keyup if you're willing to live with a flicker of the insertion point every time a key is pressed.
I'm open to cleaner solutions.

I found what I think is a pretty good solution to this problem. When I use AJAX to submit the form then I want the warning to suppress. This is accomplished with onbeforeunload.
window.onbeforeunload=function(e){}
But after I submit I might make additional changes and so I want the warning to show again. To do this I added a keyup handler to a form element.
$('txtarea').onkeyup=dirty;
What dirty does is checks is the input field has changed if it has then I set onbeforeunload to null.
function dirty(e){
if (e.srcElement.value != e.srcElement.defaultValue){
window.onbeforeunload=null;
}
}

I just found another solution to prevent Safari from displaying the "Are you sure you want to reload this page?" dialog when textareas have changed their content.
It turns out that setting the value through Javascript clears Safari's changed state:
$(document).on('blur', 'textarea', function() {
var value = $(this).val();
$(this).val('').val(value);
});
Clearing the value first is important, directly setting it to the content it already is does not work.
EDIT Apparently setting window.onbeforeunload to an empty function still works, however $(window).on('beforeunload', function() {}) does not.