Set value when textarea has changed but focus has not been lost - javascript

When users change a textarea I use onchange to set a lock value. If they submit the change it clears the lock, but if the try to close or refresh the page or exit out of the form then my site will send an alert to let them know they are about to lose their changes.
<textarea onchange="lock=1"></textarea>
Unfortunately, onchange only fires when a change has been made AND when the user blurs the text field.
Currently, if a person has made changes but have not yet submitted them and the textarea is still in focus, they will lose their changes if F5 is accidentally pressed.
I was thinking of using onkeypress but there's lot of times when the person might be pressing keys in the form and it not result in a change, like cursor keys.
Is there a way to set a value if the contents has changed, even if the field hasn't been blured yet?

Related

Input field not loosing focus when I update a value in it and thus Form Data didn't gets updated on Save Button click

I have a case where my Input fields are not getting updated on Save Button click, as it seems like they are not losing Focus when I update them and then immediately click on Save Button without clicking anywhere else on the Page.
Does anyone has identified this behavior? Please let me know if you have any articles/documentation for such scenarios.

jQuery - Check if input field is untouched

I'm trying to do something with jQuery or just JavaScript (either way works). I need to check if a certain form input field is untouched AND has a value.
Essentially what's going on is that, from a previous page, a user fills out a small form... they are redirected to the full version of the form with said information pre-filled. To reduce hassle, I would like to make it so that as the user fills out the form, it skips the pre-filled input fields. I need to do this in a non-blocking away, so if a user actually clicks on a pre-filled input field to change the value, it won't just skip again.
Is this even possible?
Edit: In this context, when I say "skip", I mean as in to move onto the next form field in the form, if there is any left.
I don't know what you mean by "skip". But you can add an event listener for the change event of the inputs and then set a class/data-attribute or store the information as a js property, so you can test for this value and treat inputs differently if they have been touched.

How to enable a backspace work inside a form textbox?

I'm using a form where in a text box is bound to a variable object by its path. I also have a button to fetch few records based on the input given in this text box. When I enter something for the first time and hit the button, it fetches the records. But again if I try to hit backspace or delete buttons inside the text box, it takes me to the previous page instead of simply deleting the text inside. Is there a way out? I tried with events like preventDefault() using keyCode restrictions, but in vain. Please help.
PS: This text box has regex validations and also has logic to pre-populate.
when records are fetched, you lose the focus on your text box. When you press the Backspace key once more, the browser takes you to the previous page (as most browers do). Set the focus back on your element after you fetch the records or change you code so the records fetching will not change the focused element.
See : https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.focus

Raise different events if a textbox is focused or not

I'm working on this page:
How it works: the "Consultar" button searches for the code in the "Código" textbox and reloads the page. The "Salvar" button calls a routine to save what you have changed in that item.
Here's what I gotta do: if the "Código" textbox is focused and the user press Enter, the event of the "Consultar" button must be raised. If the "Código" textbox is not focused and the user press Enter, the event of the "Salvar" button must be raised.
I don't know how to do this, I tried to do this using SetDefault button but it won't work cause I need a different button to be default depending if the textbox is focused or not.
I wonder I that I'll probably have to use some javascript, but I have no clue about how to do it.
Can anyone help me?
Thank you.
Bind an event handler to the keypress event on your document and then check if the input field is focused. If so, you can submit your search form, otherwise you continue with your saving logic.
See this fiddle to see it in action: http://jsfiddle.net/KkJ2t/

Fire blur event unless specific element is clicked

I have three search categories (see first image). The user selects one and I show the search input that corresponds to that topic in the space of the categories (see second image). I automatically focus on the input with jQuery so the user can easily begin typing. If the user changes their mind and blurs the intput I hide it and again show the three categories.
This all works great if the user clicks enter to search, but I also want to allow them to be able to click the go button next to the search input field. The issue is that if they try to click the go button the input is blurred and then hidden and the submit click is never fired (I cannot unbind the blur event upon clicking this element because it is never fired - the blur is triggered first)
So is there any way to execute the function bound to the blur event (hiding the div) unless this "go" element is clicked using jQuery or JavaScript?
You have several options:
You can only hide the input on blur if the focus has gone somewhere outside its container, so if the focus has gone to the "Go" button, you don't hide the input at all.
You can your code design and fire the search question as an ajax call rather than a form submit.
You can hide the input on blur after a brief setTimeout() which gives the form submission a chance to get sent before it's hidden.
instead of placing the blur event on the input, place the blur event on the container that holds both the input and the Go button.

Categories

Resources