Develop Reference

I want to stop user to input in a specific moment by JavaScript

I have a textarea where I have created a limitations of 0/150 word the 0 number increases 1, 2, 3 like that and when it goes to 150/150 I want that textarea not to take more inputs now I have tried to disable the textarea it works but user cant undo their text so actually I want that it stop taking more inputs plus user can undo their changes not disabling the textarea
if(document.getElementById("maximum_length").innerText==150){
document.getElementById("pro_desc").disabled = true;
}
else if(document.getElementById("maximum_length").innerText<=150){
let current = document.getElementById("maximum_length").innerText
document.getElementById("maximum_length").innerText = Number(current) + 1;
}

Try to use maxlength attribute:
<textarea maxlength="150">

Applying increasing values to text field on focus or on click

I have 18 rows of text fields and in each one I need to give it an increasing ID, however they're not just straight forward, as the bottom row in the grid could need ID 1 and the first one could need ID 15 depending on what is chosen. It doesn't need to look that pretty as long as it does the job. I will be using it to insert data in to a database from an iPad and ideally having an onclick event on the row title, and that adding the next incremental number would be perfect, however if that's not possible adding an onfocus event would be fine.
I already have the following
$('.played').on('focus', function(){
var $this = $(this);
if($this.val() == ''){
$this.val('1');
} else {
$this.val('');
}
});
Which adds the number 1 in the clicked text field and if you click on it when it has the value of 1, it removes it. What I'd now like to do is when the next 'played' class text field that's clicked, it populates it with 2, and so on up to 18. Is this possible?

Maybe something like the following to get the max value that you can check against yourself to know if you need to set it or clear it out, and additionally if you don't have a value and you do have a max value, your new value would be max + 1
var valueArray = $('.played').map(function(played){ return $(played).val(); }).toArray();
var maxValue = Math.max(valueArray);

Not editable,removable part of a textarea

I have a simple textarea and It has a default value. I want to hold this value everytime. User should not remove this value but he can add extra string.
<textarea>This is contstant</textarea>
As you see above. It has a default value. How can I protect this value? But user can add something after default value like below.
<textarea>This is contstant and extra things by user</textarea>
So how can do a partially editable textarea with default value?

You can attach an event handler to the <textarea> that does a simple validation every time it changes. If it tries to change to where your constant is partially destroyed, overwrite the X characters of the string value.
$('#foo').keydown(function () {
if ($(this).val().indexOf("This is constant. ") !== 0) {
var length = "This is constant. ".length;
var current = $(this).val();
var after = current.slice(length);
$(this).val("This is constant. " + after);
}
});
Here is a example on JSFiddle.
I recommend using JQuery for this because <textarea> doesn't actually have a value, or I think even a text attribute that you can check. JQuery just abstracts away <textarea>'s quirks.

I would go this way:
Style the textarea to remove the border.
Put a div on top which contains the constant text.
Wrap both elements in a div to give it a common border.
That way, the constant text will appear as if it was part of the textarea but it's not.
When you submit the form, prepend the static text to the field value.

Prevent jiggling when auto-adjusting width of text input

I managed to write an angular directive (I have extracted it to pure jQuery for this post) to auto-adjust the width of a text input.
However, it seems like the width of the input field is not changing fast enough because the contents scroll back and forth.
Type into the input field to see for yourself: Demo on JSFiddle
Here is the code:
var $element = $('#my-input');
// create dummy element to calculate text width in pixels
var dummy = $('<span></span>');
$('body').append(dummy);
dummy.css('visibility', 'hidden');
// apply all relevant text styling from our input element
dummy.css('fontFamily', $element.css('fontFamily'));
dummy.css('fontSize', $element.css('fontSize'));
dummy.css('fontWeight', $element.css('fontWeight'));
dummy.css('letterSpacing', $element.css('letterSpacing'));
var resize = function() {
dummy.html($element.val().replace(/ /g, ' '));
$element.width(dummy.innerWidth() + 1); // it's 1px off for some reason
};
resize();
$element.on('keyup', resize);
How can I prevent this from happening? I've already experimented some with scrolling the input field but to no success. Anybody have an idea?

The keyup that you use is triggered only when the user release its keyboard key, so only after that the character is added on the input field and its content is bigger than its width. It cause the jiggeling you talk about.
You should add the input event to your listener event list. This event, supported only by new browsers, is triggered everytime a character is changed in the input field.
You can check this answer about input field change events to learn more.

Type a word from the keyboard and store each letter into a series of multiple input text boxes

I would like to present to the user several input text box that allows them to type a string of letters or characters that stores one letter into each box in a 'spill-over' manner. Each box is an input text type that has a limit of 1 character.
For example, the image above shows 3 input boxes (don't count the first box which shows the first letter of a word). If I type continuously a s t, 'a' should go into box2, 's' into box3 and 't' into box4. Is this possible?
At the moment, I can only manage to type one letter per box and then either have to hit the tab key or use the mouse to move the focus to the next input box on the right.
What magical CSS/HTML/Javascript would I be needing for me to complete this Quest, Sire?
Reference/Related:
http://moodurian.blogspot.com/2013/09/how-i-managed-to-allow-input-of-only-1.html

If you need a jquery solution, than you can use .keyup() event, and an if condition, which will check the length of the input filed, if it exceeds 1, it will focus the very next field.
Demo
$("input").keyup(function() {
if($(this).val().length >= 1) {
var input_flds = $(this).closest('form').find(':input');
input_flds.eq(input_flds.index(this) + 1).focus();
}
});
Make sure you also use maxlength attribute on your input fields, so that a user typing fast may not exceed the character limit.
Demo 2

As #Mr.Alien said, setting MaxLength property will safeguard the text box in having more than 1 character of text. Additionally, You should select the text in the text box while it is getting a focus. It will simplify the process if user starts from the first text box again.
$("input").keyup(function() {
var input_flds = $(this).next("input");
input_flds.select().focus();
});
DEMO It is a modified copy of #Mr.Alien demo
Update:
Implementing the above concept in a selected text box, [Concept: Set a class for the text boxes which you want to apply the need]
$("input").keyup(function() {
var input_flds = $(this).nextAll(".test:first");
input_flds.select().focus();
});
//where .test will be your class on the selected text boxes.
DEMO - 1