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
Related
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?
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.
I have included a simple homemade WYSIWYG editor into my HTML Javascript App by using a contentEditable DIV (let's call this EDITDIV) and a series of edit buttons in another DIV. Although far from brilliant it works for me and my users.
My problem is whenever I need to fix the text in EDITDIV which I do by simply setting contentEditable=false, I still want to allow the app users to be able select some of their previously editable text in EDITDIV and perform not edit operations on it, e.g. to use it as a search string.
To do this the users need to be able to select some of the text in EDITDIV and then click outside of EDITDIV. At this point the selection is no more. My question is how do I save the selection to use later on. I could do this every time the selection changes, or at the point when the focus on EDITDIV is lost. I tried both techniques. I cannot find an event (e.g. onselect, onselectionchange) that worked reliably for the first method and for the second method, setting contentEditable to false stops the focus, so the onblur event never happens.
Help much appreciated.
Well, I have some paragraphs in my php that is coming from a database, and I want the user to have the ability to double click the text or press a button, edit the text, and then save it in database. Is it possible?
Sure you can.
All you need to do is put a submit button that whenever it is clicked you preview a textarea. Then you show the value from the database on the textarea (by SELECT on the SQL command) and then after the 'send' submit button (after the user finished editing) take the value the user wrote by the name of the textarea and put it instead of the text you previewed (INSERT INTO command).
You can avoid using a textarea by setting the contentEditable property to true or false on the element that contain the text.
For example, if the HTML is like :
<p id="sometext">This is the paragraph you cant to be able to edit</p>
You can use document.getElementById("sometext").contentEditable = true; in JS to make it editable - and document.getElementById("sometext").contentEditable = false; to reverse it.
Then you could for example retrieve the innerHTML of the element when done with editing, and send it via AJAX to a PHP processing page (updating into MySQL DB) ^^
Yes, you can. You'd need a textarea with submit button, and then you would take the contents of the textarea and use SQL update to update the database with the contents of the textarea.
A full answer is a tad to broad for Stack Overflow.
I have a form I'm working with that allows the user to continually add new rows as needed (used for making an article with multiple "howto" steps, they can click over and over again to add a new step). What I would like to be able to do is have the user be able to click in any of those rows at any time and then click on a word or button that is off to the side that will then insert the value of that button into the last known cursor position.
So for example I may have one form that currently has 3 rows. If the user goes back and wants to insert some data they could click back in the box and hit the button corresponding to the data they want to insert.
Example input 1: "Remove the customers current IP address and replace with their static IP, [USER COULD CLICK HERE AND THEN CLICK THE STATIC IP BUTTON AND %STATIC_IP% WOULD BE INSERTED AT THE LAST KNOWN CURSOR POSITION (AKA HERE)]
Example input 2: "Enter in the customers [Click to insert %WIFI_SSID%] into the router settings"
I have found several other stackoverflow articles that are able to all insert text but they all expect it to be into a defined textarea or input. In this case I'm needing it to insert into the last known cursor position. I hope this is all clear. I look forward to any assistance or questions.
Starter code: http://jsfiddle.net/4mJwU/
If you already know how to insert some arbitrary content at the last known caret position, your only problem is to know which field was focues last time before button was clicked.
That can be done in numerous number of ways, one of those would be utilize focus and blur events (attached to fields - rows in your case) to track (in some variable for example) reference to the field last focused. It should be a piece of cake from there.
Quick and simple script that can get you started http://jsfiddle.net/sjqWu/1/
Combine what you've learned from other stackoverflow anwsers with example above and you should be ok. Happy learning!
I'd question your design. To make the user have to click a field then click some text to insert into that field seems like too many steps. You could possibly utilize some sort of drag and drop routine. Or instead of the first click being a text box, maybe make it a drop down list?
I agree with WTK. You can store the record id or text box id using some sort of event, then proceed from there.