主页 / 问题 / 684477
Accepted
Aleksandr
Asked:2020-06-28 00:39:01 +0000 UTC2020-06-28 00:39:01 +0000 UTC

通过输入框提示帮助解决问题

  • 772

输入中的工具提示与焦点一起工作，但是，当我输入数据并且输入失去焦点时，工具提示会覆盖输入的数据。如何解决这个问题，告诉我或展示。

.form-group {
  margin-bottom: 20px;
  position: relative;
  display: block;
}

.form-control {
  width: 100%;
  height: 80px;
  padding: 0 32px 2px;
  border: 1px solid #e5e5e5;
  font-size: 16px;
  display: block;
  border-radius: 3px;
  background-color: #ffffff;
  color: #505b6a;
  transition: all .3s ease;
  box-sizing: border-box;
}

.ui-input-placeholder {
  position: absolute;
  z-index: 5;
  top: 32px;
  left: 46px;
  color: #b0aaaa;
  font-size: 16px;
  pointer-events: none;
  transition: top 0.3s ease;
}

.ui-input-placeholder::before {
  content: '*';
  position: absolute;
  top: -6px;
  left: -15px;
  color: #df4a4a;
  line-height: 1;
  font-size: 23px;
  z-index: 10;
}

.form-control {
  width: 100%;
  height: 80px;
  padding: 0 32px 2px;
  border: 1px solid #e5e5e5;
  font-size: 16px;
  display: block;
  border-radius: 3px;
  background-color: #ffffff;
  color: #505b6a;
  transition: all .3s ease;
  font-weight: normal;
  font-family: "Roboto-Light", sans-serif;
}

.form-control:focus {
  padding-top: 30px;
}

.form-control:focus+.ui-input-placeholder {
  top: 19px;
}

.required-field .form-control {
  padding-left: 45px;
  z-index: 5;
  position: relative;
  background-color: transparent;
}

.required-field .form-control:focus+.ui-input-placeholder::before {
  top: -5px;
}
<label class="form-group required-field">
    <input type="text" class="form-control">
    <span class="ui-input-placeholder">Регион использования</span>
</label>

javascript

2 个回答

  1. Best Answer

    您可以尝试在纯 css + html 上使用:valid 伪类

    .form-group {
  margin-bottom: 20px;
  position: relative;
  display: block;
}

.form-control {
  width: 100%;
  height: 80px;
  padding: 0 32px 2px;
  border: 1px solid #e5e5e5;
  font-size: 16px;
  display: block;
  border-radius: 3px;
  background-color: #ffffff;
  color: #505b6a;
  transition: all .3s ease;
  box-sizing: border-box;
}

.ui-input-placeholder {
  position: absolute;
  z-index: 5;
  top: 32px;
  left: 46px;
  color: #b0aaaa;
  font-size: 16px;
  pointer-events: none;
  transition: top 0.3s ease;
}

.ui-input-placeholder::before {
  content: '*';
  position: absolute;
  top: -6px;
  left: -15px;
  color: #df4a4a;
  line-height: 1;
  font-size: 23px;
  z-index: 10;
}

.form-control {
  width: 100%;
  height: 80px;
  padding: 0 32px 2px;
  border: 1px solid #e5e5e5;
  font-size: 16px;
  display: block;
  border-radius: 3px;
  background-color: #ffffff;
  color: #505b6a;
  transition: all .3s ease;
  font-weight: normal;
  font-family: "Roboto-Light", sans-serif;
}

.form-control:focus,
.form-control:valid {
  padding-top: 30px;
}

.form-control:focus+.ui-input-placeholder,
.form-control:valid+.ui-input-placeholder {
  top: 19px;
}

.required-field .form-control {
  padding-left: 45px;
  z-index: 5;
  position: relative;
  background-color: transparent;
}

.required-field .form-control:focus+.ui-input-placeholder::before {
  top: -5px;
}
    <label class="form-group required-field">
    <input type="text" class="form-control" required="required">
    <span class="ui-input-placeholder">Регион использования</span>
</label>

    英文版https://stackoverflow.com/a/11209779/5441700

    • 2

  2. 您可以检查输入中是否有文本，然后将其保留为“焦点”

    $('.form-control').focusout(function(){
  if ($(this).val()) {
    $(this).trigger('focus');
  }
});
    .form-group {
  margin-bottom: 20px;
  position: relative;
  display: block;
}

.form-control {
  width: 100%;
  height: 80px;
  padding: 0 32px 2px;
  border: 1px solid #e5e5e5;
  font-size: 16px;
  display: block;
  border-radius: 3px;
  background-color: #ffffff;
  color: #505b6a;
  transition: all .3s ease;
  box-sizing: border-box;
}

.ui-input-placeholder {
  position: absolute;
  z-index: 5;
  top: 32px;
  left: 46px;
  color: #b0aaaa;
  font-size: 16px;
  pointer-events: none;
  transition: top 0.3s ease;
}

.ui-input-placeholder::before {
  content: '*';
  position: absolute;
  top: -6px;
  left: -15px;
  color: #df4a4a;
  line-height: 1;
  font-size: 23px;
  z-index: 10;
}

.form-control {
  width: 100%;
  height: 80px;
  padding: 0 32px 2px;
  border: 1px solid #e5e5e5;
  font-size: 16px;
  display: block;
  border-radius: 3px;
  background-color: #ffffff;
  color: #505b6a;
  transition: all .3s ease;
  font-weight: normal;
  font-family: "Roboto-Light", sans-serif;
}

.form-control:focus {
  padding-top: 30px;
}

.form-control:focus+.ui-input-placeholder {
  top: 19px;
}

.required-field .form-control {
  padding-left: 45px;
  z-index: 5;
  position: relative;
  background-color: transparent;
}

.required-field .form-control:focus+.ui-input-placeholder::before {
  top: -5px;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="form-group required-field">
    <input type="text" class="form-control">
    <span class="ui-input-placeholder">Регион использования</span>
</label>

    • 1

相关问题