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

问题描述

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

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

我一直保持visibility默认<label> "hidden"

我为具有 2 个参数的任务创建了 hide() 和 show() 函数，即。

输入框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;

标签： javascripthtmlcsssetattribute

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

问题描述

解决方案

推荐阅读