CODEWITHSUNDEEP
javascripthtmlcsssetattribute
Abhay
Abhay

Reputation: 526

JavaScript: element.setAttribute(attribute,value) , element.attribute=value & element.[attribute]=value not changing attribute value

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.

  1. id of input box
  2. 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;

Upvotes: 0

Views: 1709

Answers (4)

keja
keja

Reputation: 1363

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>

Upvotes: 1

G. Penev
G. Penev

Reputation: 1

	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>

Upvotes: 0

lenilsondc
lenilsondc

Reputation: 9800

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>

Upvotes: 1

Darlesson
Darlesson

Reputation: 6162

I would suggest to use CSS for the placeholder portion instead:

:focus::placeholder{
    opacity: 0;
}


:focus::placeholder {
    opacity: 0;
}
<input placeholder="Visible">

Upvotes: 2

Related Questions