主页 / 问题 / 712646
Accepted
Aleksandr
Asked:2020-08-31 14:26:30 +0000 UTC2020-08-31 14:26:30 +0000 UTC

填充数据时如何将类添加到输入？

  • 772

任务是，如果用户填写该字段，则输入字段中的提示将位于顶部，为此，如果输入的值已填写，我需要添加一个类：

.contacts-form {
  padding: 32px 54px;
  background: #fff;
  box-shadow: 0 5px 18px 0 rgba(0, 0, 0, 0.05);
}

.ui-group {
  position: relative;
}

.ui-field {
  width: 100%;
  height: 50px;
  padding: 12px 0 0;
  border: 0 solid #E1F5F2;
  border: 0 solid #6BC5D2;
  border-bottom-width: 1px;
  background-color: #fff;
  font-size: 15px;
  color: #390050;
  display: block;
  transition: all .3s ease;
}

.ui-field:focus+.ui-placeholder {
  margin-right: 0;
  top: 0;
  left: 0;
  font-size: 13px;
}

.ui-placeholder {
  margin-right: 4px;
  top: 23px;
  left: 0;
  font-size: 14px;
  color: #9B8EA0;
  position: absolute;
  transition: top .3s ease;
}

.ui-placeholder::before {
  content: '*';
  display: inline;
  transition: all .3s ease;
}
<form action="#" class="contacts-form">
  <div class="ui-group">
    <input type="text" class="ui-field" id="name" value="">
    <label for="name" class="ui-placeholder">Имя</label>
  </div>
</form>

javascript

2 个回答

  1. Best Answer

    JS：

    document.getElementById("name").addEventListener("change", function(){
  if(this.value.length){
   this.classList.add('ui-placeholder');
   }else{
   this.classList.remove('ui-placeholder');
   }
});

    jQuery：如果我正确理解要添加哪个类..

    $("#name").change(function() {
  if ($(this).val().trim().length) {
    $(this).addClass("ui-placeholder");
  } else {
    $(this).removeClass("ui-placeholder");
  }
})
    .contacts-form {
  padding: 32px 54px;
  background: #fff;
  box-shadow: 0 5px 18px 0 rgba(0, 0, 0, 0.05);
}

.ui-group {
  position: relative;
}

.ui-field {
  width: 100%;
  height: 50px;
  padding: 12px 0 0;
  border: 0 solid #E1F5F2;
  border: 0 solid #6BC5D2;
  border-bottom-width: 1px;
  background-color: #fff;
  font-size: 15px;
  color: #390050;
  display: block;
  transition: all .3s ease;
}

.ui-field:focus+.ui-placeholder {
  margin-right: 0;
  top: 0;
  left: 0;
  font-size: 13px;
}

.ui-placeholder {
  margin-right: 4px;
  top: 23px;
  left: 0;
  font-size: 14px;
  color: #9B8EA0;
  position: absolute;
  transition: top .3s ease;
}

.ui-placeholder::before {
  content: '*';
  display: inline;
  transition: all .3s ease;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" class="contacts-form">
  <div class="ui-group">
    <input type="text" class="ui-field" id="name" value="">
    <label for="name" class="ui-placeholder">Имя</label>
  </div>
</form>

    • 3

  2. 可以这样吗

        var uiField = document.getElementsByClassName('ui-field')[0];
    uiField.addEventListener('keyup', function () {
           
        if (uiField.value.length >= 1) {
            uiField.classList.add('ui-field-active');
        }else{   
            uiField.classList.remove('ui-field-active');
        }
    })
    .contacts-form {
  padding: 32px 54px;
  background: #fff;
  box-shadow: 0 5px 18px 0 rgba(0, 0, 0, 0.05);
}

.ui-group {
  position: relative;
}

.ui-field {
  width: 100%;
  height: 50px;
  padding: 12px 0 0;
  border: 0 solid #E1F5F2;
  border: 0 solid #6BC5D2;
  border-bottom-width: 1px;
  background-color: #fff;
  font-size: 15px;
  color: #390050;
  display: block;
  transition: all .3s ease;
}

.ui-field:focus+.ui-placeholder {
  margin-right: 0;
  top: 0;
  left: 0;
  font-size: 13px;
}

.ui-placeholder {
  margin-right: 4px;
  top: 23px;
  left: 0;
  font-size: 14px;
  color: #9B8EA0;
  position: absolute;
  transition: top .3s ease;
}

.ui-placeholder::before {
  content: '*';
  display: inline;
  transition: all .3s ease;
}

.ui-field-active{
    
  background-color: #000;
  color: #fff;
}
    <form action="#" class="contacts-form">
  <div class="ui-group">
    <input type="text" class="ui-field" id="name" value="">
    <label for="name" class="ui-placeholder">Имя</label>
  </div>
</form>

    • 2

相关问题