JavaScript: element.setAttribute(атрибут,значение) , element.attribute=значение и элемент.[атрибут]=значение без изменения значения атрибута

Моя задача - удалить Placeholder из поля ввода, когда пользователь нажимает на него, и сделать метку видимой. Если пользователь ничего не заполняет, снова верните заполнитель и сделайте метку невидимой.

Я могу скрыть его, но не могу переназначить. Я пробовал element.setAttribute(attribute,value) , element.attribute=value & element.[attribute]=value type, но не работает.

Я сохранил значения по умолчанию visibility из <label> "hidden"

Я создал функции hide() и show() для задачи с двумя параметрами, а именно.

  1. идентификатор поля ввода
  2. идентификатор ярлыка

Код 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: у меня есть решение моей проблемы с использованием CSS в ответ @Darlesson. Но если возможно, скажите, что не так в моем коде. РЕДАКТИРОВАТЬ 2: Как указал @lenilsondc, мой код не работал, потому что var e1 не было элемента, а value attribute элемента.

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

заменен на

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

работал с e1.placeholder=placehlder;


javascript html css setattribute
person Abhay    schedule 01.08.2018    source источник
comment
Возможный дубликат Очистить ввод формы и сохранить заполнитель   -  person rileyjsumner    schedule 01.08.2018

Ответы (3)


arrow_upward
2
arrow_downward

Вместо этого я бы предложил использовать CSS для части заполнителя:

:focus::placeholder{
    opacity: 0;
}


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

person Darlesson    schedule 01.08.2018
comment
Но как переназначить значение заполнителя? - person Abhay; 01.08.2018
comment
В этом случае вы бы не стали. Он скрывает текст-заполнитель, используя непрозрачность в фокусе, а затем показывает его при размытии. Это то поведение, которое вы ожидаете? Запустите фрагмент, чтобы увидеть, как он работает. - person Darlesson; 01.08.2018

arrow_upward
1
arrow_downward

Если вы не можете сделать это с помощью css (используя ответ @Darlesson) по причинам совместимости, вы можете сделать это следующим образом фрагмент с использованием javascript.

Хитрость заключается в том, чтобы сохранить старый заполнитель, чтобы при восстановлении он был у вас под рукой. В этом случае я использовал новый атрибут 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>

person lenilsondc    schedule 01.08.2018
comment
Как вы можете видеть в моем коде, я тоже использовал переменную placehlder для хранения значения заполнителя. Но что не так в моем коде? - person Abhay; 01.08.2018
comment
Из-за этого var e1=window.document.getElementById(input_id).value. e1 — это значение элемента, тогда, когда вы пытаетесь установить e1.placeholder, вы ссылаетесь не на элемент, а на его значение; поэтому он никогда не получает набор заполнителей. - person lenilsondc; 01.08.2018

arrow_upward
1
arrow_downward

Вы можете сделать это без какого-либо 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>

person keja    schedule 01.08.2018
comment
я добавил код только для хрома, так что если вы не используете хром, вы правы. - person keja; 02.08.2018
comment
Я использую мозиллу фаерфокс. - person Abhay; 02.08.2018
comment
я обновил код, но все еще не 100% поддержка браузера - person keja; 02.08.2018