Develop Reference

Change Text Color if match found automatically JavaScript|HTML

i have a textarea where i want to change color automatically
for example : this is my pen my friend
as soon as i enter the above text the keyword=pen should become green color and
keyword=freind should become red as soon it matches
How do i achieve this thing
code is working but half working
function changeText()
{
document.getElementById("text").style.color ="green";
}
</script>
Another Code i have But not Working
var str = 'Connect';
var value = str.includes('Connect');
if(value==str)
{
document.getElementById("text").style.color ="green";
}
else
{
document.getElementById("text").style.color ="red";
}

No, you can't do this in a textarea or text input. Any CSS text-related property will affect the whole text within the the textarea/input, not just a word.
see for more info: Multicolor Text Highlighting in a Textarea or Text Input

First, you'll need to detect changes on the text area. Look into element.addEventListener() and the change event. Then inspect the text from the text area. You have bunch of options for this, but the easiest one is string.includes(). If it returns true, call your function to turn the text green.

Javascript to set colour of html label back to default colour rather than assuming color black

I have written the following javascript function to disable a text input field and grey out the associated label when a certain option is selected in a selectbox, conversley when other values are selected the text field is enabled and the label colour is set back to black.
It works, however it makes the assumption that the textlabel was black to start with which might not be the case, what is the easiest way to obtain the original colour and turn it back to that so it will work okya when the original color was not black.
Alternatively is there some other attribute of label that can be used to make it looked greyed out rather than explicity setting colour to grey. I know it cannot be disabled but is there something else that could be used.
function disableInput(selectbox, inputfield, disableValue) {
select = document.getElementById(selectbox);
selected = select.options[select.selectedIndex].value;
if(selected==disableValue)
{
document.getElementById(inputfield).disabled = true;
document.getElementById(inputfield+"label").style.color='grey';
}
else
{
document.getElementById(inputfield).disabled = false;
document.getElementById(inputfield+"label").style.color='black';
}
}

Setting a style.blah property to an empty string will cause the normal stylesheet to apply again.
Alternatively, you could define your styles in CSS and add and remove a class from the element instead of twiddling its styles directly.

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.

Why textarea freezes when using jQuery function append to insert text

I'm trying to insert something in a text area (#note_text) from a drop down list (#note_template). User should be able to insert a number of items into the text area in between typing characters using the keyboard. Similar to selecting from a collection of emoticons to be put in the message.
When done in the followign way, the text area can receive items after typing.
function update1() {
$txt = $("#note_text").val() + $("#note_template option:selected").val() ;
$("#note_text").val($txt);
$("#note_template").val("");
}
But when done in the following way, the content of the text area wouldn't update after typing. Only before typing I can insert items from the drop down list.
function noteTempalteSelected() {
$("#note_text").append( $("#note_template option:selected").val() );
$("#note_template").val("");
}
So it seems that the use of append causes the text area to freeze. Could anyone explain why ? Thank you.

Ok I think I know whats going on here. For the append to work properly, the element should have an innerHTML property or html() in jquery. Textarea just like the input has a val() property. So for this to work properly you should try this:
$('#note_template').on('click', 'option:selected', function(e){
var txtArea = $('#note_text');
txtArea.val(txtArea.val() + $(this).val());
$(this).val('');
});
[DEMO HERE][1]

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