如何检查一个类是否具有值并在其后切换一个类

时间：2018-07-01 16:49:04

标签： javascript jquery html css

我想检查一个类是否有值。如果from collections import Counter s = 'abbccdddeee' c = Counter(s) counts = Counter(c.values()) 中有值，是否可以选择立即“检查”？ （无任何点击或其他操作）。 （因此，如果预定义了一个值，则电子邮件占位符会立即变小），我还制作了一个小gif来显示我的问题：i.imgur.com/WQq53Ky.mp4。现在，当我单击输入字段时，它就可以工作了。我尝试了不同的方法。（事件），但我找不到合适的方法。 ！重要！我不想检查是否有人输入了内容，就像您加载页面时类是否具有值一样！

<input>
$('.form-control-login').focus(function() {
    $(this).parent().addClass('in-focus');
});

$('.form-control-login').blur(function() {
    $(this).parent().removeClass('in-focus');
});

$('.form-control-login').on('input', function() {
  $(this).parent().toggleClass('is-empty', this.value.trim().length == 0);
});

$('.form-control-login').blur( function() {
  $(this).parent().toggleClass('is-empty', this.value.trim().length == 0);
});
.form-group.label-floating label.control-label, .form-group.label-placeholder label.control-label, .form-group.label-static label.control-label {
    position: absolute;
    pointer-events: none;
    transition: .3s ease all;
}
.form-group.label-floating label.control-label, .form-group.label-placeholder label.control-label {
    font-size: 44px;
    line-height: 1.4;
    font-weight: 400;
    padding: 20px;
}
.form-group.label-static label.control-label,
.form-group.label-floating.in-focus label.control-label,
.form-group.label-floating:not(.is-empty) label.control-label,
.form-group.has-bootstrap-select label.control-label {
  margin-top: -10px;
  font-size: 11px;
  line-height: 1.07143; }

.form-group.login-error::after {
    content: '\f00d';
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 100%;
    background-color: #f92552;
    color: #fff;
    font-size: 9px;
    right: 35px;
    top: 30px;
    margin-top: -10px;
    font-family: FontAwesome;
}
.form-group.reg-error::after {
    top: 210px;
}
.form-group.label-floating.reg-bday.is-empty {
    display: table-cell;
    padding-right: 10px;
    padding-bottom: 10px;
}
.form-group.label-floating.reg-bday {
    display: table-cell;
    padding-right: 10px;
    padding-bottom: 10px;
}
.form-control-login {
    height: 60px;
    display: block;
    width: 100%;
    padding: 1.1rem;
    font-size: 14px;
    line-height: 1.5;
    padding: 1.5rem 1.1rem .5rem;
    line-height: 1.75;
    color: #495057;
    background-color: #fff;
    border: 1px solid #e6ecf5;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;  
}
.form-control-login:focus {
    border: 1px solid rgba(255, 93, 56, 0.43);
}

感谢您的帮助！

2 个答案:

答案 0 :(得分：2)

仅在页面加载时运行此语句

$('.form-control-login').parent().toggleClass('is-empty', $('.form-control-login').val().trim().length == 0);

$('.form-control-login').focus(function() {
  $(this).parent().addClass('in-focus');
});

$('.form-control-login').blur(function() {
  $(this).parent().removeClass('in-focus');
});

$('.form-control-login').on('input', function() {
  $(this).parent().toggleClass('is-empty', this.value.trim().length == 0);
});

$('.form-control-login').blur(function() {
  $(this).parent().toggleClass('is-empty', this.value.trim().length == 0);
});

堆栈片段

.form-group.label-floating label.control-label,
.form-group.label-placeholder label.control-label,
.form-group.label-static label.control-label {
  position: absolute;
  pointer-events: none;
  transition: .3s ease all;
}

.form-group.label-floating label.control-label,
.form-group.label-placeholder label.control-label {
  font-size: 44px;
  line-height: 1.4;
  font-weight: 400;
  padding: 20px;
}

.form-group.label-static label.control-label,
.form-group.label-floating.in-focus label.control-label,
.form-group.label-floating:not(.is-empty) label.control-label,
.form-group.has-bootstrap-select label.control-label {
  margin-top: -10px;
  font-size: 11px;
  line-height: 1.07143;
}

.form-group.login-error::after {
  content: '\f00d';
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 100%;
  background-color: #f92552;
  color: #fff;
  font-size: 9px;
  right: 35px;
  top: 30px;
  margin-top: -10px;
  font-family: FontAwesome;
}

.form-group.reg-error::after {
  top: 210px;
}

.form-group.label-floating.reg-bday.is-empty {
  display: table-cell;
  padding-right: 10px;
  padding-bottom: 10px;
}

.form-group.label-floating.reg-bday {
  display: table-cell;
  padding-right: 10px;
  padding-bottom: 10px;
}

.form-control-login {
  height: 60px;
  display: block;
  width: 100%;
  padding: 1.1rem;
  font-size: 14px;
  line-height: 1.5;
  padding: 1.5rem 1.1rem .5rem;
  line-height: 1.75;
  color: #495057;
  background-color: #fff;
  border: 1px solid #e6ecf5;
  border-radius: .25rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-control-login:focus {
  border: 1px solid rgba(255, 93, 56, 0.43);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group label-floating is-empty">
  <label class="control-label">EMAIL</label>
  <input class="form-control-login" name="login" value="James@testmail.de" autocomplete=off type="email" login-error>
</div>
PreferenceFragment

答案 1 :(得分：0)

您必须在页面加载后立即检查该值。然后根据输入值将焦点放在元素上，从而达到效果。

$('.form-control-login').focus(function() {
    $(this).parent().addClass('in-focus');
});

$('.form-control-login').blur(function() {
    $(this).parent().removeClass('in-focus');
});

$('.form-control-login').on('input', function() {
  $(this).parent().toggleClass('is-empty', this.value.trim().length == 0);
});

$('.form-control-login').blur( function() {
  $(this).parent().toggleClass('is-empty', this.value.trim().length == 0);
});

(function(){
    var inp = document.querySelector('.form-control-login');
    if(inp.value) inp.focus();
  })();
.form-group.label-floating label.control-label, .form-group.label-placeholder label.control-label, .form-group.label-static label.control-label {
    position: absolute;
    pointer-events: none;
    transition: .3s ease all;
}
.form-group.label-floating label.control-label, .form-group.label-placeholder label.control-label {
    font-size: 44px;
    line-height: 1.4;
    font-weight: 400;
    padding: 20px;
}
.form-group.label-static label.control-label,
.form-group.label-floating.in-focus label.control-label,
.form-group.label-floating:not(.is-empty) label.control-label,
.form-group.has-bootstrap-select label.control-label {
  margin-top: -10px;
  font-size: 11px;
  line-height: 1.07143; }

.form-group.login-error::after {
    content: '\f00d';
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 100%;
    background-color: #f92552;
    color: #fff;
    font-size: 9px;
    right: 35px;
    top: 30px;
    margin-top: -10px;
    font-family: FontAwesome;
}
.form-group.reg-error::after {
    top: 210px;
}
.form-group.label-floating.reg-bday.is-empty {
    display: table-cell;
    padding-right: 10px;
    padding-bottom: 10px;
}
.form-group.label-floating.reg-bday {
    display: table-cell;
    padding-right: 10px;
    padding-bottom: 10px;
}
.form-control-login {
    height: 60px;
    display: block;
    width: 100%;
    padding: 1.1rem;
    font-size: 14px;
    line-height: 1.5;
    padding: 1.5rem 1.1rem .5rem;
    line-height: 1.75;
    color: #495057;
    background-color: #fff;
    border: 1px solid #e6ecf5;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;  
}
.form-control-login:focus {
    border: 1px solid rgba(255, 93, 56, 0.43);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group label-floating is-empty">
                                <label class="control-label">EMAIL</label>
                                <input class="form-control-login" name="login" value="James@testmail.de" autocomplete=off type="email" login-error>
                        </div>

相关问题
最新问题