Develop Reference

Is it possible to capture the value prior to an input type insertReplacementText event in a textarea?

When an insertReplacementText input event type, as defined in this W3C Editor's Draft, takes place on a textarea element, the data property or attribute provides the text that was added to the textarea value, replacing some other text, such as when right-click on a misspelled word and the context menu provides suggested words.
The misspelled word does not have to be selected first; and, if the textarea has the focus (the cursor could be far from the misspelled word), when the right click takes place, the cursor is not moved at all.
After the replacement, the cursor is positioned to the right of the new text, as in a paste event. The difficulty is determining the length of the text that was replaced and or it's value.
I ask because I'd like to capture the needed information to undo/redo this event.
Thank you.
Update:
If you maintain a copy of the last value of the textarea in RAM or other lcoal storage options, then there is a way to accomplish this; although the event itself provides little data. I was rather stupid at first, as I was testing this in a separate piece of code, because I forgot that, in the code of my particular project, there is always in RAM a copy of the last value in the textarea. Having that information makes this operation very similar to a paste event when there is a selection before the paste that is replaced by the pasted text. After the replacement is performed, the cursor is positioned immediately to the right of the last character of the replacement text. The data property of the insertReplacementText event contains the value of the inserted text.
Thus, it is a matter of arithmetic involving the length of the new text, the difference in the length of the previous copy of the textarea value's length and the length of the DOM element's value after replacement, and the cursor position after the replacement has been performed. The difference in the length's of the textarea values is the difference in the length of the old text and new text. This provides the selection range from which to extract the old text from the saved copy before updating the copy to the new value. The selectionStart is the same for both the old text and new text; the difference is in the selectionEnd based on the lengths, if not equal.
As long as the browser keeps positioning the cursor to the right of the last character of the replacement text, and you maintain a copy of the last value of the textarea, it appears that this ought to work.
Thank you.

html url input disable keyboard autospace after sentence (mobile)

I have html input fields and in mobile devices, the keyboard automatically adds spaces after sentence.
This is problematic for a input of type "url". How do I disable it?
I tried the following and still adds a space after the period in the domain name.

Assuming you have your input stored in a variable and that you are interested in its value only when you do a submit, you can easily trim its value with
yourInput.trim();
this will remove all leading and trailing spaces, thus cleaning your input.
If you want to delete the spaces directly when typing, you can attach that code to the change event:
yourInput.addEventListener('change', e => e.currentTarget.value.trim());

Prevent user from chaning tokens within input box

How to prevent the change of certain elements, tokens, within a textarea with javascript or jquery? For instance I have this string in an input
this is normal text {this can't be changed 1}. This is more text. {This can't be changed 2 }. And some more text
If a user tries to change text within the curly brackets I want to prevent that from happening.
I thought of finding the indexes of the start and stop indexes of the tokens and when a user tries to change an element, I would see if it falls within that range.
Is there a different approach that I can use?

You could use a regular expression to read everything between {} into an array when the page loads. Then when the form submits do that same thing again and compare them to make sure they are the same.

You should build a regular expression that validates the validity of the text. on every keydown event in the textarea revalidate the regex and notify the user / prevent the keypress.
As text can also be changes in other ways (paste, autocomplete, etc.) you should also validate on change event of the textarea.

Javascript: input box - autocapitalize first letter but can override

I have a name input box. I would like to auto-capitalise the first letter of the name as the user types, but allow the user to override the change for names such as "de Salis".
I see here that this is impossible with CSS, because text-transform:capitalize; will capitalise every word and can't be overridden.
A .keyup handler can fix up the first letter as you type, and there are a bunch of solutions found here to do that.
What I can't see how the original capitalisation can be overriden easily. I guess I need a flag, but if the function is one that can be attached to multiple elements, where should the flag live? I could append a DOM element as a flag, but this seems pretty ugly.
A fiddle of the non-override model is found here.
Suggestions?

To have the input box show only the first capital letter, you can use the keyCode directly, as that is always in uppercase format.
That alone will alleviate the requirement for expensive regex and .replace() methods your using.
jQuery:
$('.auto').one('keyup', function(e) {
$(this).val(String.fromCharCode(e.keyCode));
});
Reference: jsFiddle
The following answer has been revised to include Tab Key requirements, clicking inside of input box and pasting via context-menu, using keyboard paste method (Ctrl + V), and directly typing into it. It does away with the character keyCodes so international support is acknowledged. The jQuery selector was obtained here.
RE-Revised: jsFiddle (Does not force capital letter on submit.)

PHONE VALIDATION: How To Overwrite Text In a Textbox When Typing Without Clearing Whole Field?

I would like to know how to create a script that overwrites text that is already in a text box. (in jquery or javascript)
Example: If I have a text phone field that says:
+1 (xxx) xxx-xxxx
When a user clicks the field, I want the characters to remain, and the focus set to the 4TH character in the text box, just after the 1.
Then, as a user types each number, it overwrites the x one by one, until all the x's are gone. But, I want the parenthesis and hyphen formatting to stay, so the users input forms around the formatting.
I would also like this form to only allow numbers, hyphens, and parenthesis, and not allow submitting if x's still exist.
If you can help me with this, THANK YOU! :-)

Try masked input plugin # [
http://digitalbush.com/projects/masked-input-plugin/
]1
Looks like it matches what you need.