I need to trigger an input change event, but only if the value changed. And I need this done from a keyboard event. Is there a way to invoke the browser's change mechanism which will either trigger the change event to fire, or will not depending on if the value was modified?
Example:
User clicks on an input field
User does not modify value of the field
user presses a key causing the input field to blue
onchange does not get triggered.
vs
User clicks on an input field
User modifies the value of the field
user presses a key causing the input field to blue
onchange gets triggered.
Is this possible? Or I need to do the onfocus save value, onblur compare and possibly call onchange, but only if onchange was not already called because the user just navigated away by clicking vs say a keyboard trigger.
What key is it? If that key isn't a standard input key, set the onchange to check the field for the change of the field.
You also can bind an onkeypress do the document, and return:false; when the key that changes the input to blue is pressed.
A little more context could help.
If I get you right, you need two variables to remember previous and current states of the input, and a listener to handle interaction:
<html>
<head>
<script language="javascript">
var startFieldValue = "Some value, possibly value of input when it is loaded";
var endFieldValue = "";
var focusFlag = 0;
function interact(keyEvent) {
if(focusFlag == 1)
return true;
var key = keyEvent.keyCode? keyEvent.keyCode : keyEvent.charCode
if(String.fromCharCode(key) == "a") {
if(startFieldValue != endFieldValue) {
var elem = document.getElementById('input-to-be-changed');
elem.style.backgroundColor = "blue";
startFieldValue = endFieldValue;
}
}
}
</script>
</head>
<body onkeypress="interact(event);">
<input id="input-to-be-changed" onchange="endFieldValue = document.getElementById('input-to-be-changed').value;" onfocus="focusFlag = 1;" onblur="focusFlag = 0;">
</body>
Just read the comment on previous post, you should have global idea of what's going on, though. Changes are removing checking for focus, and placing listner (onkeypress) inside every input. The function interact should take 2 values - event and id of input to focus next. Also focusing new element should change startFieldValue.
Sorry to not write code itself, but it's kinda late and I really need some sleep.
Related
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);
}
It is a web app.
The user type information in a Textarea box.
The information is stored in the localStorage.
Right now the user needs to click "OK" button in order to keep the information.
I would like that the information will be stored automatically.
What is the proper way to do it?
Without jQuery, we need to make sure that the text changes are captured for all (or most) of the browsers, so we can attach several listeners to the textarea element, updating local-storage, whenever the text changes.
function onTextChange(obj) {
var elem = obj.target;
// If text has changed, update local-storage and save the saved
// value with the element for later checking w/o having to read
// from local-storage.
if (elem.old_value !== elem.value) {
elem.old_value = elem.value;
window.localStorage.setItem("textEntry", elem.value);
console.log('saved',elem.value);
}
return false;
} // onTextChange()
var elem=document.getElementById('textinput');
if (elem.addEventListener){
elem.addEventListener('input',onTextChange.bind(elem),false)
elem.addEventListener('keyup',onTextChange.bind(elem),false)
elem.addEventListener('change',onTextChange.bind(elem),false)
}
else if (elem.attachEvent) {
elem.attachEvent('onpropertychange', onTextChange.bind(elem))
}
More information about events which capture changes, see keydown, keypress, keyup and the example at textInput event.
You mean you store the data on the localstorage? IF yes, then you can update the localstorage content on every keypress on the textarea.
Example
$("#myTextarea").keypress(function(){
window.localStorage.setItem("textAreaContent", $(this).val());
});
I have a webpage with a small survey. I want to pre populate some of the answers based on user inputs to previous question.
In the below code, if value of id QR~QID3 depends upon value of QID1_Total. However after the page loaded and even if the condition is met the textbox is not populated with correct value.
.addOnload(function()
{
if(document.getElementById("QID1_Total").value>15) {
document.getElementById("QR~QID3").value = "Good";
}
else{
document.getElementById("QR~QID3").value = "Average";
}
});
$("#QID1_Total").on("input", function() {
//statements goes here
});
use of on("input" will track every inputting event, include drop and paste.
know more about onInput : https://mathiasbynens.be/notes/oninput
Here is an Fiddle Example to know how trigger works :
https://jsfiddle.net/5sotpa63/
An Assumption
Let Us Say you are using a function, which holds this statement show Good and Average according to users Input.
var targetElem = document.getElementById("QID1_Total");
var showComment = (targetElem,value>15) ? "Good" : "Average";
document.getElementById("QR~QID3").value = showComment;
Above code is the shorter method of your own statement mentioned in your question.
Now on Change of the target QR~QID3 you need to load some content. you utilize the below code as follows.
$("#QR~QID3").on("input", function() {
//your next question loading statements goes here,
//statements to proceed when you show some comment Good or Average
}).trigger("input");
Hope! this could be helpful.
$('#QID1_Total').keydown(function () {
//ur code
});
as the mouse key is pressed in the input field the function is called
You need to add an event listener to the "QID1_Total" element.
If you want to run the check while the user changes the input, i.e. after each keypress use the oninput event.
If you want to run the check after the user has completed the input, use the onchange event. The onchange event will only fire after the input loses focus.
You can bind the event listeners by using the addEventListener() function like this:
document.getElementById("QID1_Total").addEventListener("input", function(){
//Code goes here
});
Here is a JSFiddle showing both methods.
You also have to use the parseInt() function on the textbox values before you can perform mathematical functions with them.
I have written a blur() event to handle focus out event on a text field. The code looks like this.
$("input[type=text]").blur(function (event) {
if(this.value){
//do something
}
event.originalEvent.handled = true;
});
I have a situation where a text-field is automatically getting focus with the text from previous page.
To give an example, in flipkart.com, type some text in the search field and click search. My event handler must execute for focus out event. (It is happening correctly).
In the next page, the text entered is prepopulated in the text-field and focus is also on it. So in this page, if I do some action, the text-field will lose focus and the same event gets called again. I don't need this to happen.
Is there a way to avoid this? By combining two event handlers? Please help.
Change your code so that the function is only bound to the element after a user explicitly interacts with the element like so:
$("input[type=text]").on('keyup keypress change click', function() {
$("input[type=text]").blur(function(event) {
if (this.value) {
//do something
alert('blur was called after interacting with element');
}
event.originalEvent.handled = true;
});
});
$('#test').focus();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="test" value="some value">
Try this : You know the text value from previous page, just compare it with current text value, if both same then don't do any action. See below code
$(function(){
var prevTextValue = "read your previous text value here";
$("input[type=text]").blur(function (event) {
//check if value is not empty and not equal to previous value
if(this.value!="" && this.value != prevTextValue){
//do something
}
event.originalEvent.handled = true;
});
});
How do I grab the value from an input box as its being entered?
onkeyup will be triggered every time a key is released. While it looks to be the solution it has some problems.
If the user move the cursor with the arrows, it is triggered and you have to check yourself if the field value didn't change.
If the user copy/paste a value in the input field with the mouse, or click undo/redo in the browser, onkeyup is not triggered.
Like in a mac or in google docs, I didn't want a save button to submit forms in our app, here is how I do it.
Any comment, or shortcut is welcome as it is a bit heavy.
onfocus, store the current value of the field, and start an interval to check for changes
when the user moves something in the input, there is a comparison with the old value, if different a save is triggered
onblur, when the user moves away from the field, clear the interval and event handlers
Here is the function I use, elm is the input field reference and after is a callback function called when the value is changed:
<html>
<head>
<title>so</title>
</head>
<body>
<input type="text" onfocus="changeField(this, fldChanged);">
<script>
function changeField(elm, after){
var old, to, val,
chk = function(){
val = elm.value;
if(!old && val === elm.defaultValue){
old = val;
}else if(old !== val){
old = val;
after(elm);
}
};
chk();
to = setInterval(chk, 400);
elm.onblur = function(){
to && clearInterval(to);
elm.onblur = null;
};
};
function fldChanged(elm){
console.log('changed to:' + elm.value);
}
</script>
</body>
</html>
use an onchange event handler for the input box.
http://www.htmlcodetutorial.com/forms/_INPUT_onChange.html
I noticed you used the "jquery" tag. For jQuery, you can use the .keypress() method.
From the API documentation:
Description: Bind an event handler to the "keypress" JavaScript
event, or trigger that event on an
element.
The event will fire every time keyboard input is registered by the browser.
.keydown() and .keyup() are also available. Their behavior is slightly different from .keypress() and is outlined by the API documentation as well.
The nice thing about jQuery is that you can use the same code across Firefox, IE, Safari, Opera and Chrome.