Develop Reference

When changing disabled input from true to false, why can I not click on the input?

I have a function that changes an input property from true to false. The dom and css update but I still cannot click on or use the input.
<input id="playerLocation" type="text" name="location" oninput="setPlayerLocation()" disabled="true">
.player-details input[disabled="true"] {
opacity: 0.6;
}
playerLocation.setAttribute('disabled', false);

You need to use removeAttribute for disabled.
playerLocation.removeAttribute('disabled');
<input id="playerLocation" type="text" name="location" oninput="setPlayerLocation()" disabled="true">

How can I add a default text in my HTML input text

How can I add a default text in my HTML text just like in the image below
Right now this is my html codes:
<input type="text" class="form-control input-sm" name="guardian_officeno" placeholder="Office #" required pattern="[0-9].\d{8}|\d{11}" title="Only Numbers are accepted and must be 10 or 11 numbers"></td>
</div>
EDIT:
How can I add text that cannot be erased

As per the recent update of your question, you need to add readonly attribute to your input tag. If you are trying to disable part input, which is not possible, refer to last section of my answer.
<input type="text" value="SOME_DEFAULT_VALUE" readonly>
Adding readonly will prevent users to change the text in your input box.
Note: Don't rely on readonly as it can be easily overridden using
dev tools. Make sure you do have server side checks for the same.
Before you updated your question
Add value attribute to your input tag if you want some default text in the input box
<input type="text" value="Default Val">
If you are talking about the prefix i.e country specific STD code like +63, then you can do is split up your input tags, and set a default value in the first tag and let your user write the number in the other tag.

Edit, with the tag value:
https://www.w3schools.com/tags/att_input_value.asp
<input type="text" class="form-control input-sm" name="guardian_officeno" placeholder="Office #" required pattern="[0-9].\d{8}|\d{11}" title="Only Numbers are accepted and must be 10 or 11 numbers" value="default text"></td>
</div>

you mean you want to add a default text in "input" tag?
you need to add "value" attribute in there!
<input type="text" class="form-control input-sm" name="guardian_officeno" placeholder="Office #" required pattern="[0-9].\d{8}|\d{11}" title="Only Numbers are accepted and must be 10 or 11 numbers" value="put your default text right here"></td>

input tag not support for before attribute in css, but you can using wrapper by other tags. look for example below:
html + css
<div class="input-row">
Phone number:<span id="phoneNumber"><input type="text" name="phoneNumber" value="" placeholder="1234567890"></span>
</div>
<style>
.input-row {
display: inline-block;
line-height: 1;
}
span#phoneNumber::before {
content: '+63';
display: inline-block;
border: 1px solid #ccc;
padding: 1px;
line-height: 20px;
margin: 0px;
}
input[name='phoneNumber']{
line-height: 18px;
border: 1px solid #ccc;
margin: 0px;
padding: 2px;
}
</style>

Change input and textarea background color when there's no value

What's the recommended approach to change the background color of input and textarea when there's no value? Can this only be done on page load or can it be persistent? I prefer if it's persistent since I have a form that loads from callbacks.
I'm thinking JQuery would be best for this to affect this css:
input[type="text"], textarea {
background-color : #d1d1d1;
}
I tried this, but only the textarea had the changes for some reason:
input[type="text"]:empty, textarea:empty {
background-color : #d1d1d1;
}
DevExpress input textbox:
<input class="dxeEditArea_DevEx dxeEditAreaSys"
id="ctl00_ctl00_ASPxSplitter1_Content_ContentSplitter_MainContent_ASPxCallbackPanel1_ASPxFormLayout3_ASPxFormLayout3_E18_I"
name="ctl00$ctl00$ASPxSplitter1$Content$ContentSplitter$MainContent$ASPxCallbackPanel1$ASPxFormLayout3$ASPxFormLayout3_E18" readonly="readonly"
onfocus="aspxEGotFocus('ctl00_ctl00_ASPxSplitter1_Content_ContentSplitter_MainContent_ASPxCallbackPanel1_ASPxFormLayout3_ASPxFormLayout3_E18')"
onblur="aspxELostFocus('ctl00_ctl00_ASPxSplitter1_Content_ContentSplitter_MainContent_ASPxCallbackPanel1_ASPxFormLayout3_ASPxFormLayout3_E18')" value="Business"
type="text" style="background-color: rgb(192, 224, 206);">
I've also tried empty/not empty method and it still doesn't work for some reason. It changes color to gray, but it doesn't change the background to white if it's not empty:
input[type="text"]:empty {
background-color : #d1d1d1;
}
input[type="text"]:not(:empty) {
background-color : #FFFFFF;
}

You might need the attribute required and the selector :invalid
input[type="text"]:invalid, textarea:invalid {
background-color : #d1d1d1;
}
<input required type="text" placeholder="write here"/>
<textarea required placeholder="write here"></textarea>
<hr/>
<input required type="text" placeholder="write here" value="text"/>
<textarea required placeholder="write here">text</textarea>

It could be done quite easily with jQuery, cross-browser of course.
$(':input').on('input', function() {
$(this).toggleClass('empty', this.value.length === 0);
}).trigger('input');
input.empty, textarea.empty {
background-color : #d1d1d1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input />

you can use Attribute Selector for placeholder in input and textarea or for value in input and :focus :
[placeholder=""],
[value=""] {
background: red;
}
[placeholder=""]:focus,
[value=""]:focus {
background: none
}
<h2>Placeholder</h2>
<input type="text" placeholder="" />
<textarea placeholder=""></textarea>
<hr />
<h2>Value</h2>
<input type="text" value="" />

Mark label as red when required input is not filled

Lets say I have this form input element:
<label for="myInput">Label Text</label>
<input type="text" name="special" id="myInput" required>
Now since this input is required, and I don't enter any values in this field, I get an error saying
This field is required.
Validation: It appears that the existing default html5 validation is overridden by jQuery validator. There is magic happening, and I see that I can change the existing style behavior by changing the below css
select.error,
input[type=text].error,
input[type=email].error,
input[type=password].error {
border: 2px solid #ff0000;
}
label.error {
color: #ff0000;
font-size: .8em;
}
I also notice that in the error situation the above html becomes like below:
<label for="myInput">Label Text</label>
<input type="text" name="special" id="myInput" required>
<label class="error" for="myInput">This field is required.</label>
How do you think validation is happening in the first place?
How do I make the text in the first label element text as red?
In the code, where should I be looking to answer the above questions?

first use id attribute for label
<label for="myInput" id="mylabel">Label Text</label>
, then document.getElementById('mylabel').style.color = "red";
you can write this code on some button click or onblur of text box
DEMO
If you are using jquery then you can refer the below code
$( "#myInput" ).blur(function() {
document.getElementById('mylabel').style.color = "red";
});
JS solution
html
<label for="myInput" id="mylabel">Label Text</label>
<input type="text" name="special" onblur="blurFunction()" onfocus="focusFunction()" id="myInput">
js
function blurFunction()
{
document.getElementById('mylabel').style.color = "red";
}

Change the background color of an input element on focus

I would like to change the background colour of the text input (.item-input) when I press a tab key or via mouse - for some reason focus is not firing?
For example:
<tr class="item">
<td> <input class="item-input" type="text" /> </td>
<td> <input class="option" type="text" /> </td>
</tr>
If .item-input is selected via key or mouse
if($('.item-input').is(':focus')) {
$(this).addClass("input-focus");
}
In the css file I have:
.input-focus {
background-color: yellow;
}

Use plain CSS:
.item-input:focus {
background-color: yellow;
}
<input class="item-input" type="text" />
But if you want to use jQuery, listen to the focus event:
$('.item-input').on('focus blur', function() {
$(this).toggleClass("input-focus");
});
.input-focus {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="item-input" type="text" />
I replaced the .addClass() method with the .toggleClass() method under the impression that you want the class removed on blur.