Prevent user from chaning tokens within input box - javascript

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.

Related

HTML text input RegEx validation not working even with required attribute

I am trying to have my dynamically generated text inputs only allow for digits and an optional decimal point in between. I am using the attribute but the inputs are still unresponsive to the RegEx.
var howMuch = $("<input>").attr("type", "text").attr("name", "howMuch").attr("pattern", "([0-9]+(\.[0-9]+)?)").prop("required", true);
The HTML generates like so: HTML
PLEASE do not mark this question as duplicate, none of the existing similar answers are already using the 'required' attribute
Pointy answer applies.
Also, pattern attributes only works at form validation time. In other words, user is able to type in whatever he wants. Only when he presses submit, pattern attribute is taken into consideration.
If you want a realtime feedback to user you should listen to change events and manually trigger the form validate method. Or you can use the keydown event to prevent some characters to be accepted as input.

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());

Ignore space changes in text field widget

Is there a way to ignore the spaces in the string of the text field on the 'change' event. For example #(x) ( sin(x) )and#(x) (sin(x)) are treated as two different function strings, and a change event is triggered on text field change
The solution is to watch for the input changes in JavaScript, when it change it will have value, save it into a variable removing all the whitespaces, next time when value comes remove all the whitespaces and compare with previous string variable, if both are same Do Nothing else Do Something! you can find sample code here.
For removing whitespace used this.

HTML textarea prevent some text from being deleted

I am making a terminal window in HTML/JavaScript and am using a textarea for input. I would like to prevent sections of the text in the textarea from being deleted. For example, if I had the text in the textarea "C:\>Random Code" I would like to prevent the user deleting the "C:\>" text. Is this possible using javascript?
Assuming jQuery, this script will listen for keystrokes, and if any of the required text can't be found (ie: user tries to delete it) it will add itself right back in there:
var requiredText = 'C:>';
$('textarea').on('input',function() {
if (String($(this).val()).indexOf(requiredText) == -1) {
$(this).val(requiredText);
}
}
You cannot make a section of textarea uneditable (only the whole control).
You can use various JavaScript trickery (listening to keypress events and cancelling event using event.preventDefault if the user wants to do something that you do not want to allow)
Another solution is to, instead of having an undeletable section of the input, to automatically append (or prepend ) a predefined string to the user input (and conveneintly display it for the user in some way).
Update:
So, my solution would look like this:
var requiredText = 'C:>';
$('textarea').on('keyup',function(event) {
if (GetSelectionStart(this) < requiredText.length){
event.preventDefault();
event.stopPropagation();
}
}
Where GetSelectionStart is a function that tells the beginning of the selected text (or caret position, if no text range is selected). For some possible implementations, see e. g. Caret position in textarea, in characters from the start
This function assumes that requiredText is always at the beginning of the string. But of course, it can be adapted for more complex scenarios.

How to get a Javascript routine to NOT act if it's in a text box?

I've got a simple page, and in that page runs a simple jquery keypress routine to catch clicks of the numbers 1 to 9 (has to be that to pass RNIB accessibility test).
And in that page is a form, which can have numbers entered as part of a postcode.
http://find.talking-newspapers.co.uk/result.php?addressInput=kingston
Scroll to the bottom, try typing 8 or 9 for example. The text is entered, but it also acts on the keypress. Expected, but not good.
I'm aware of various things like document.getElementById, but I can't figure out how to put these together to ensure that while the cursor is in the text input box, it doesn't act out the keypress catcher.
The target property of the event object (the parameter to the handler function) will tell you which element actually generated the event.
You need to check whether e.target is an <input> element, like this:
if ($(e.target).is(':input'))
return;

Categories

Resources