Develop Reference

Using the same function for different DOM elements

I have input and text boxes which have different placeholders like "number of reps", "time needed in secs" etc.
<input type="text" id="sets" placeholder="Number of sets">
<textarea id="textarea" placeholder="write"></textarea>
I have built a click event so that whenever any box is clicked, its placeholder becomes blank so user inputs a value like so:
textarea.addEventListener("click",checkInput);
sets.addEventListener("click",checkInput);
function checkInput(e){
e.currentTarget.placeholder="";
}
^^made a single function that can be used for both textarea and sets
How can I get the placeholder back if the user clicks a box but doesn't type in a value and moves on to another item (blur event) by using a single function for all the items like so:
textarea.addEventListener("blur",originalValue);
reps.addEventListener("blur",originalValue);
function originalValue(e){
e.currentTarget.placeholder= default value/original value;
}

Try out this textbox
<input type="text" placeholder="Enter a value">
As you can see there is no code whatsoever, and it does exactly what you want; if a user enters any text the placeholder is removed. If the user enters no text (or removes existing text) the placeholder is restored on blur.
I seriously don't understand why you even began to write code around this!
If you just want to confuse your users, take a copy of the placeholder into the element before clearing it and restore it on blur.
textarea.addEventListener("click",checkInput);
sets.addEventListener("click",checkInput);
textarea.addEventListener("blur",restore);
sets.addEventListener("blur",restore);
function checkInput(e){
e.currentTarget.originalPlaceholder = e.currentTarget.placeholder
e.currentTarget.placeholder="";
}
function restore(e){
e.currentTarget.placeholder = e.currentTarget.originalPlaceholder;
}
<input type="text" id="sets" placeholder="Number of sets">
<textarea id="textarea" placeholder="write"></textarea>
I think this is a terrible idea FWIW!

Onclick check if the input field is empty then change the text onclick to password

I have this HTML code:
<input type="text" class="input_discount" id="discountCode" placeholder="ENTER YOUR TEXT">
<button type="button" class="btn apply_btn" id="changeType" required/>APPLY</button>
JS:
$('#changeType').click(function(){
$('#discountCode').attr('type','password');
});
The code is working fine. But when I enter the text in the input field and click on apply button, then it converts the input type to password. But when I directly click on apply button and then write inside the input field it shows password format. Can anybody tell me how to prevent this if input field is empty and user clicks on apply button the input type remains focused and should be in text format and after filling the details it should convert to password format.

Why your code was not working.
When there was nothing entered, as per your code it was converting the type to text.
Solution I applied
While the button is clicked, check if textbox is empty or not.
Note: I am considering space as a valid character in the input box, because it can be used for password. If you want to eliminate space you can use
$('#discountCode').val().trim().length
Working Demo
$('#changeType').click(function(e) {
if ($('#discountCode').val().length) {
$('#discountCode').attr('type', 'password');
} else {
$('#discountCode').attr('type', 'text');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="input_discount" id="discountCode" placeholder="ENTER YOUR TEXT">
<button type="button" class="btn apply_btn" id="changeType" required/>APPLY</button>

change input text field into label with input typed value inside label javascript

I want to change the text field into a label tag with input user typed text inside it. I have tried and seen many example which are working but not set value as a text in label. e.g.:
<input id="1" type="text" value="hi"/>
I want to replace this input text field with label or div tag with its innerHTML hi or the user typed value i have tried the example below but i it is not done by me.
<p id="1" onclick="wish(id)">sasdsad</p>
<script>
document.getElementById("1").outerHTML = document.getElementById("1").outerHTML.replace(/p/g,"div");
</scrip>

Element id should start with character not number.
With using jQuery
<input id="one" type="text" value="hi"/>
$('#one').replaceWith("<div>"+$('#one').val()+"</div>");

Or you can use like this as well, just for an alternative solution :
html
<input id="toChange" type="text" value="hi"/>
<p id="clickMe" onclick="changeTag()">Click Me</p>
jQuery
function changeTag(){
var originalForm = $('#toChange');
var div = $('<div/>',{
text : originalForm.val(),
id : originalForm.attr('id')
});
$('#toChange').replaceWith(div);
}
DEMO

Copy input field from one to another?

UPDATE: I got in contact with the developer and he said to use this code as a foundation:
(function($) {
$('.jr-page').on('keyup','.jrAutoSuggest',function(){
$(".customfield").val($(this).val());
});
})(jQuery);
It doesn't work at the moment and I'm not sure why but you can also see my original post below this text for more details and I appreciate all of your help:
I am trying to copy one input field to another when a user types. I would like to accomplish something like this: http://jsfiddle.net/bxHQ5/ Notice that when you type into the input box on the left, it duplicates the text on the right.
To be more specific, on my website, I am using this form
I want what the user types in the "Car Manufacturer" input box to directly be copied to the "Testfield" input box as they type. Also, the "Testfield" input box text cannot be deleted or altered by the user once text is inputted in the car manufacturer field. They both have to be exactly the same.
Please note that the car manufacturer input field shows a hidden input which the user cannot see and should be ignored in this case. If you look at the HTML, the car manufacturer input looks like this:
<input id="myrelatedfield" class="jrAutoSuggest ui-autocomplete-input acInstructions" type="text" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"></input>
You'll notice I put my own customer ID in there called "myrelatedfield" The field it needs to copy text to looks like this which has a custom class "jr_testfield"...
<input class="jr_testfield jrText" type="text" data-click2add="0" name="data[Field][Listing][jr_testfield]"></input>
Thanks!

I ave updated the code
have a look at it
http://jsfiddle.net/vishalgupta358/bxHQ5/383/
$("#EmailAddress").keyup(function(){
$("#Username").val($(this).val());
});

Use readonly="true" property to prevent write access.Input value will also be available when u submit the form
HTML:
<input type="text"id="EmailAddress" name="EmailAddress" value="" >
<input type="text" id="Username" readonly="true" name="Username" value="">
Script:
$("#EmailAddress").keyup(function(){
$("#Username").val($(this).val());
});
DEMO

How do I set a textbox text color when it's being edited

I'm working with java and I have a text box which I read data from a database into. So for example, the name "John" loads into the text box. I have the code
<input class="classText" name="fName" id="fname1" type="text" value=""/><br />
but what I'm wanting to do is keep the word that's loaded into the textbox black and change the color to blue when I try to enter text into that text box. So for example,
The word "john" is loaded in the text box...I delete the word John and type in Max. Max should be blue.
Hope that's not too confusing. Any help?

You can use onkeypress event
<input class="classText" name="fName" id="fname1" type="text" value="" onkeypress="changeColour(this)"/><br />
and define function
<script>
function changeColour(e)
{
e.style.color='blue'
}
</script>
Working fiddle
Or better assign some class on key press

Use css for styling.
#fname1:focus{color:blue}
http://jsfiddle.net/BC5RP/

The fact that your backend is Java is irrelevant here - you're dealing with the UI only.
There are several approaches to this. The one on this fiddle example uses JQuery's on(input).
$('.classText').on('input', function() {
$(this).addClass('changed');
});