JavaScript: element.setAttribute(attribute,value) , element.attribute=value & element.[attribute]=value not changing attribute value
Question
My task is to remove Placeholder from input box when user clicks on it and make label visible. If user doesn't fill anything in it again place back the placeholder and make label invisible.
I am able to hide it but can't reassign it. I have tried element.setAttribute(attribute,value) , element.attribute=value & element.[attribute]=value type but isn't working.
I have kept default visibility of <label> "hidden"
I have created hide() and show() functions for the task both having 2 parameters viz.
- id of input box
- id of label
Code JavaScript:
var placehlder;
function hide(input_id,lbl){
var e1=document.getElementById(input_id);
placehlder=e1.getAttribute('placeholder');
/*document.write(placehlder);*/
e1.placeholder="";
var e2=document.getElementById(lbl);
e2.style.visibility="visible";
}
function show(input_id,lbl){
var e1=window.document.getElementById(input_id).value;
var e2=document.getElementById(lbl);
/*document.write(placehlder);*/
if (e1.length ==0)
{
e2.style.visibility="hidden";
e1.placeholder=placehlder;
/*e1.setAttribute('placeholder',placehlder);*/
/*e1['placeholder']=placehlder;*/
}
}
Code HTML:
<form>
<label id="first" >First Name</label><br/>
<input id="box" type="text" placeholder="First Name" onclick="hide(id,'first')" onfocusout="show(id,'first')"/>
</form>
Full Code: HTML + CSS + JAVASCRIPT:
var placehlder; function hide(input_id,lbl){ var e1=document.getElementById(input_id); placehlder=e1.getAttribute('placeholder'); /*document.write(placehlder);*/ e1.placeholder=""; var e2=document.getElementById(lbl); e2.style.visibility="visible"; } function show(input_id,lbl){ var e1=window.document.getElementById(input_id).value; var e2=document.getElementById(lbl); /*document.write(placehlder);*/ if (e1.length ==0) { e2.style.visibility="hidden"; e1.placeholder=placehlder; /*e1.setAttribute('placeholder',placehlder);*/ /*e1['placeholder']=placehlder;*/ } }
#first{ visibility: hidden; } #box{ }
<!doctype html> <html> <head> <meta charset="utf-8"/> <title> Functions </title> </head> <body> <form> <label id="first" >First Name</label><br/> <input id="box" type="text" placeholder="First Name" onclick="hide(id,'first')" onfocusout="show(id,'first')"/> </form> </body> </html>
EDIT 1: I have got the solution to my problem using CSS in answer by @Darlesson . But if possible please tell whats wrong in my Code. EDIT 2: As pointed by @lenilsondc my code didn't worked because of var e1 didn't had element but the value attribute of element.
var e1=window.document.getElementById(input_id).value;
replaced to
var e1=window.document.getElementById(input_id);
did worked with e1.placeholder=placehlder;
4 answers
solution1
2 ACCPTED 2018-08-01 17:44:37
I would suggest to use CSS for the placeholder portion instead:
:focus::placeholder{
opacity: 0;
}
:focus::placeholder { opacity: 0; }
<input placeholder="Visible">
solution2
1 2018-08-01 17:55:19
You can do it without any JS, and only HTML/CSS something like;
.group { display: flex; } .group label { display: none; order: 1; } .group input { order: 2; display: block; } .group input:focus ~ label { display: block; } /* note: browser compatibility is only ~82% https://caniuse.com/#feat=css-placeholder */ .group input:focus::placeholder { color: transparent; }
<div class="group"> <input type="text" id="id1" placeholder="Description"> <label for="id1">Description</label> </div>
solution3
1 2018-08-01 17:56:23
If you can't do this using css ( using @Darlesson's answer ) for compatibility reasons, you can do this as the following snippet using javascript.
The trick is to store the old placeholder so that when you need to restore you have it available. In this case I used a new attribute data-placeholder where I store de current value and clean the real placeholder attribute. Finally, when the element lose focus, you can get the attribute data-placeholder and reset the real placeholder value with it.
var myInputLabel = document.getElementById('myInputLabel'); var myInput = document.getElementById('myInput'); // when element gets focused myInput.addEventListener('focus', function (e) { // save current placeholder myInput.setAttribute('data-placeholder', myInput.getAttribute('placeholder')); // clear current placeholder myInput.setAttribute('placeholder', ''); // show label myInputLabel.style.display = 'inline'; }); // when element gets blured myInput.addEventListener('blur', function (e) { // restore the placeholder stored on data-placeholder myInput.setAttribute('placeholder', myInput.getAttribute('data-placeholder')); // hide label myInputLabel.style.display = 'none'; });
<form> <label id="myInputLabel" style="display: none;">Name</label><br> <input type="text" id="myInput" placeholder="Name"> </form>
solution4
0 2018-08-01 18:05:03
var input = document.getElementById("box"); var label = document.getElementById("first"); // When the user clicks on the input element input.addEventListener("focus", function() { // Make label visible first.style.visibility = "visible"; // Remvoe placeholder input.placeholder = ""; }); // When the user clicks away input.addEventListener("focusout", function() { // Check if he did not typed anything if (input.value === "") { // Restore placeholder value and hide label input.placeholder = "First Name"; first.style.visibility = "hidden"; } });
#first{ visibility: hidden; }
<!doctype html> <html> <head> <meta charset="utf-8"/> <title> Functions </title> <style> #first{ visibility: hidden; } </style> </head> <body> <form> <label id="first" >First Name</label><br/> <input id="box" type="text" placeholder="First Name" /> </form> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.