JavaScript: element.setAttribute(attribute,value) , element.attribute=value & element.[attribute]=value 不改变属性值答案

【问题标题】：JavaScript: element.setAttribute(attribute,value) , element.attribute=value & element.[attribute]=value not changing attribute valueJavaScript: element.setAttribute(attribute,value) , element.attribute=value & element.[attribute]=value 不改变属性值
【发布时间】：2018-08-01 17:40:15
【问题描述】：

我的任务是在用户单击输入框时从输入框中删除占位符并使标签可见。如果用户没有再次填写任何内容，请放回占位符并使标签不可见。

我可以隐藏它，但不能重新分配它。我试过 element.setAttribute(attribute,value) , element.attribute=value & element.[attribute]=value type 但不工作。

我保留visibility 的默认<label> "hidden"

我已经为任务创建了 hide() 和 show() 函数，它们都有 2 个参数，即。

输入框id
标签ID

代码 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;*/
            }
     }

代码 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>

完整代码：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>

编辑 1：我在@Darlesson 的回答中使用 CSS 解决了我的问题。但如果可能的话，请告诉我的代码有什么问题。编辑2：正如@lenilsondc 所指出的，我的代码不起作用，因为var e1 没有元素，而是元素的value attribute。

var e1=window.document.getElementById(input_id).value;

替换为

var e1=window.document.getElementById(input_id);

确实与e1.placeholder=placehlder;合作过

【问题讨论】：

Clear form inputs and keep placeholder的可能重复

标签： javascript html css setattribute

【解决方案1】：

我建议将 CSS 用于占位符部分：

:focus::placeholder{
    opacity: 0;
}

:focus::placeholder {
    opacity: 0;
}

&lt;input placeholder="Visible"&gt;

【讨论】：

但是如何重新分配占位符值？
在这种情况下你不会。它使用焦点上的不透明度隐藏占位符文本，然后在模糊时显示它。这是您期望的行为吗？运行 sn-p 看看它是如何工作的。

【解决方案2】：

如果出于兼容性原因您无法使用 css (using @Darlesson's answer) 执行此操作，您可以使用 javascript 执行以下 sn-p 操作。

诀窍是存储旧占位符，以便在需要恢复时可以使用它。在这种情况下，我使用了一个新属性data-placeholder，我在其中存储了当前值并清理了真正的placeholder 属性。最后，当元素失去焦点时，您可以获取data-placeholder 属性并用它重置真正的placeholder 值。

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>

【讨论】：

正如您在我的代码中看到的，我也使用变量“placehlder”来存储占位符值。但是我的代码有什么问题？
因为这个var e1=window.document.getElementById(input_id).value。 e1 是元素的值，然后当您尝试设置 e1.placeholder 时，您引用的不是元素而是它的值；因此，它永远不会得到占位符集。

【解决方案3】：

你可以在没有任何 JS 的情况下做到这一点，只有 HTML/CSS 之类的；

.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>

【讨论】：

我只添加了chrome的代码，所以如果你不使用chrome，你是正确的。
我使用 mozilla firefox。
我更新了代码，但仍然没有 100% 的浏览器支持

【解决方案4】：

	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>

【讨论】：