如何修复输入占位符与输入文本重叠？

时间：2016-09-12 10:55:38

标签： html css html5 css3 flexbox

我创建了一个简单的表单，并希望使用Google的Material Design设计它。但是，占位符文本会妨碍输入的文本，如下面的屏幕截图所示。感谢您帮助解决问题以及如何解决问题。

screen shot of form design with issue

以下是代码：

＆＃13;
＆＃13; 
@import url(https://fonts.googleapis.com/css?family=Raleway:400,700);
 body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background: #c0392b;
  font-family: Raleway;
  color: white;
  letter-spacing: 1px;
}
#formreg {
  width: 250px;
  background: #fff;
  border: 1px solid #ebebeb;
  box-shadow: 0 27px 55px 0 rgba(0, 0, 0, .3), 0 17px 17px 0 rgba(0, 0, 0, .15);
}
#formbody.form-body {
  padding: 1em 2em 1em 2em;
}
#formtitle.form-title {
  width: 100%;
  margin-bottom: 2em;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  font-size: 20px;
  font-weight: bold;
  background: #eee;
  border-radius: 0;
}
#formbody #group1 input,
#formbody #group2 input,
#formbody #group3 input {
  font-size: 15px;
  padding: 10px 10px 10px 5px;
  -webkit-appearance: none;
  display: block;
  background: #fff;
  color: #636363;
  width: 95%;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #999;
}
#formbody #group1 input:focus,
#formbody #group2 input:focus,
#formbody #group3 input:focus {
  outline: none;
}
/* Label */

#formbody #group1 label,
#formbody #group2 label,
#formbody #group3 label {
  color: #999;
  font-size: 15px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  transition: all .2s ease;
}
/* active */

#formbody #group1 input:focus ~ label,
#formbody #group1 input.used ~ label,
#formbody #group2 input:focus ~ label,
#formbody #group2 input.used ~ label,
#formbody #group3 input:focus ~ label,
#formbody #group3 input.used ~ label {
  top: -20px;
  transform: scale(.75);
  left: -2px;
  /* font-size: 14px; */
  color: #4a89dc;
}
/* Underline */

.bar {
  position: relative;
  display: block;
  width: 100%;
}
.bar::before,
.bar::after {
  content: '';
  height: 2px;
  width: 0;
  bottom: 1px;
  position: absolute;
  background: #4a89dc;
  transition: all .2s ease;
}
.bar::before {
  left: 50%;
}
.bar::after {
  right: 50%;
}
/* active */

#formbody #group1 input:focus ~ .bar:before,
#formbody #group1 input:focus ~ .bar:after,
#formbody #group2 input:focus ~ .bar:before,
#formbody #group2 input:focus ~ .bar:after,
#formbody #group3 input:focus ~ .bar:before,
#formbody #group3 input:focus ~ .bar:after {
  width: 50%;
}
/* Highlight */

.highlight {
  position: absolute;
  height: 60%;
  width: 100px;
  top: 25%;
  left: 0;
  pointer-events: none;
  opacity: .5;
}
/* active */

#formbody #group1 input:focus ~ .highlight,
#formbody #group2 input:focus ~ .highlight,
#formbody #group3 input:focus ~ .highlight {
  animation: inputHighlighter 0.3s ease;
}
@keyframes inputHighlighter {
  from {
    background: #4a89dc;
  }
  to {
    width: 0;
    background: transparent;
  }
}
/* Button */

.button {
  position: relative;
  display: inline-block;
  padding: 12px 24px;
  margin: .3em 0 0em 0;
  width: 100%;
  vertical-align: middle;
  color: #fff;
  font-size: 16px;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
  text-align: center;
  letter-spacing: 1px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid #3160B6;
  cursor: pointer;
  transition: all .15s ease;
}
.button:focus {
  outline: 0;
}
/* Button modifiers */

.buttonBlue {
  background: #4a89dc;
  text-shadow: 1px 1px 0 rgba(39, 110, 204, .5);
}
.buttonBlue:hover {
  background: #357bd8;
}
/* Ripples container */

.ripples {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}
/* Ripples circle */

.ripplesCircle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .25);
}
.ripples.is-active .ripplesCircle {
  animation: ripples .4s ease-in;
}
/* Ripples animation */

@keyframes ripples {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    width: 200%;
    padding-bottom: 200%;
    opacity: 0;
  }
}
.orange-text {
  color: #fd7b1b;
}
.blue-text {
  color: #1e73be;
}
.group {
  position: relative;
  margin-bottom: 45px;
}
.rule {
  height: 2px;
  background: #e8ebed;
  margin: 0px 35px;
}
＆＃13; 
<div id="regform">
  <form id="formreg">
    <div id="formtitle" class="form-title"><span class="orange-text">REGISTER &nbsp;</span>  <span class="blue-text">FOR ACCOUNT INFO </span>
    </div>
    <div id="formbody" class="form-body">
      <div id="group1" class="group">
        <input type="text"><span class="highlight"></span><span class="bar"></span>
        <label>Name</label>
      </div>
      <div id="group2" class="group">
        <input type="email"><span class="highlight"></span><span class="bar"></span>
        <label>Email</label>
      </div>
      <div id="group3" class="group">
        <input type="email"><span class="highlight"></span><span class="bar"></span>
        <label>Tel. Number</label>
      </div>
    </div>
    <div id="formbutton">
      <button type="button" class="button buttonBlue">Submit
        <div class="ripples buttonRipples"><span class="ripplesCircle"></span>
        </div>
      </button>
    </div>
  </form>
</div>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：3)

您可以使用本机支持的placeholder属性，而不是使用占位符文本的范围。

<input placeholder='Enter your placeholder text here' />

这里快速JSFiddle example。

答案 1 :(得分：1)

我已经回答了类似的问题here。

这里需要的是:empty选择器和:valid选择器，以便在所有情况下使占位符工作转换 - 但遗憾的是:empty不适用于input。

所以你必须在这里使用一些JS：

$("input").each(function() {
  var $this = $(this);
  // add empty class on initial run
  if ($(this).val().trim() == "") {
      $(this).addClass("input-empty");
    } else {
      $(this).removeClass("input-empty");
    }
  // add empty class on input change
  $this.on("change", function() {
    if ($(this).val().trim() == "") {
      $(this).addClass("input-empty");
    } else {
      $(this).removeClass("input-empty");
    }
  });
});

如果输入框为空，则会添加input-empty。然后你需要这个CSS来配合它：

/* not empty but valid */

#formbody #group1 input:not(.input-empty):valid ~ label,
#formbody #group2 input:not(.input-empty):valid ~ label,
#formbody #group3 input:not(.input-empty):valid ~ label {
  top: -20px;
  -webkit-transform: scale(0.75);
  transform: scale(0.75);
  left: -2px;
  /* font-size: 14px; */
  color: #4a89dc;
}

/* not empty but invalid */

#formbody #group1 input:not(.input-empty):invalid ~ label,
#formbody #group2 input:not(.input-empty):invalid ~ label,
#formbody #group3 input:not(.input-empty):invalid ~ label {
  top: -20px;
  -webkit-transform: scale(0.75);
  transform: scale(0.75);
  left: -2px;
  /* font-size: 14px; */
  color: red;
}

希望你能从这里开始。请告诉我您对此的反馈。干杯！

＆＃13;
＆＃13; 
$("input").each(function() {
  var $this = $(this);
  if ($(this).val().trim() == "") {
      $(this).addClass("input-empty");
    } else {
      $(this).removeClass("input-empty");
    }
  $this.on("change", function() {
    if ($(this).val().trim() == "") {
      $(this).addClass("input-empty");
    } else {
      $(this).removeClass("input-empty");
    }
  });
});
＆＃13; 
@import url(https://fonts.googleapis.com/css?family=Raleway:400,700);
 body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100vh;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background: #c0392b;
  font-family: Raleway;
  color: white;
  letter-spacing: 1px;
}
#formreg {
  width: 250px;
  background: #fff;
  border: 1px solid #ebebeb;
  box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.3), 0 17px 17px 0 rgba(0, 0, 0, 0.15);
}
#formbody.form-body {
  padding: 1em 2em 1em 2em;
}
#formtitle.form-title {
  width: 100%;
  margin-bottom: 2em;
  padding: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 50px;
  font-size: 20px;
  font-weight: bold;
  background: #eee;
  border-radius: 0;
}
#formbody #group1 input,
#formbody #group2 input,
#formbody #group3 input {
  font-size: 15px;
  padding: 10px 10px 10px 5px;
  -webkit-appearance: none;
  display: block;
  background: #fff;
  color: #636363;
  width: 95%;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #999;
}
#formbody #group1 input:focus,
#formbody #group2 input:focus,
#formbody #group3 input:focus {
  outline: none;
}
/* Label */

#formbody #group1 label,
#formbody #group2 label,
#formbody #group3 label {
  color: #999;
  font-size: 15px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
/* active */

#formbody #group1 input:focus ~ label,
#formbody #group1 input.used ~ label,
#formbody #group2 input:focus ~ label,
#formbody #group2 input.used ~ label,
#formbody #group3 input:focus ~ label,
#formbody #group3 input.used ~ label {
  top: -20px;
  -webkit-transform: scale(0.75);
  transform: scale(0.75);
  left: -2px;
  /* font-size: 14px; */
  color: #4a89dc;
}

/* not empty but valid */

#formbody #group1 input:not(.input-empty):valid ~ label,
#formbody #group2 input:not(.input-empty):valid ~ label,
#formbody #group3 input:not(.input-empty):valid ~ label {
  top: -20px;
  -webkit-transform: scale(0.75);
  transform: scale(0.75);
  left: -2px;
  /* font-size: 14px; */
  color: #4a89dc;
}

/* not empty but invalid */

#formbody #group1 input:not(.input-empty):invalid ~ label,
#formbody #group2 input:not(.input-empty):invalid ~ label,
#formbody #group3 input:not(.input-empty):invalid ~ label {
  top: -20px;
  -webkit-transform: scale(0.75);
  transform: scale(0.75);
  left: -2px;
  /* font-size: 14px; */
  color: red;
}

/* Underline */

.bar {
  position: relative;
  display: block;
  width: 100%;
}
.bar:before,
.bar:after {
  content: '';
  height: 2px;
  width: 0;
  bottom: 1px;
  position: absolute;
  background: #4a89dc;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.bar:before {
  left: 50%;
}
.bar:after {
  right: 50%;
}
/* active */

#formbody #group1 input:focus ~ .bar:before,
#formbody #group1 input:focus ~ .bar:after,
#formbody #group2 input:focus ~ .bar:before,
#formbody #group2 input:focus ~ .bar:after,
#formbody #group3 input:focus ~ .bar:before,
#formbody #group3 input:focus ~ .bar:after {
  width: 50%;
}
/* Highlight */

.highlight {
  position: absolute;
  height: 60%;
  width: 100px;
  top: 25%;
  left: 0;
  pointer-events: none;
  opacity: 0.5;
}
/* active */

#formbody #group1 input:focus ~ .highlight,
#formbody #group2 input:focus ~ .highlight,
#formbody #group3 input:focus ~ .highlight {
  -webkit-animation: inputHighlighter 0.3s ease;
  animation: inputHighlighter 0.3s ease;
}
/* Animations */

@-webkit-keyframes inputHighlighter {
  from {
    background: #4a89dc;
  }
  to {
    width: 0;
    background: transparent;
  }
}
@keyframes inputHighlighter {
  from {
    background: #4a89dc;
  }
  to {
    width: 0;
    background: transparent;
  }
}
/* Button */

.button {
  position: relative;
  display: inline-block;
  padding: 12px 24px;
  margin: .3em 0 0em 0;
  width: 100%;
  vertical-align: middle;
  color: #fff;
  font-size: 16px;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
  text-align: center;
  letter-spacing: 1px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid #3160B6;
  cursor: pointer;
  -webkit-transition: all 0.15s ease;
  transition: all 0.15s ease;
}
.button:focus {
  outline: 0;
}
/* Button modifiers */

.buttonBlue {
  background: #4a89dc;
  text-shadow: 1px 1px 0 rgba(39, 110, 204, 0.5);
}
.buttonBlue:hover {
  background: #357bd8;
}
/* Ripples container */

.ripples {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}
/* Ripples circle */

.ripplesCircle {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
}
.ripples.is-active .ripplesCircle {
  -webkit-animation: ripples .4s ease-in;
  animation: ripples .4s ease-in;
}
/* Ripples animation */

@-webkit-keyframes ripples {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    width: 200%;
    padding-bottom: 200%;
    opacity: 0;
  }
}
@keyframes ripples {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    width: 200%;
    padding-bottom: 200%;
    opacity: 0;
  }
}
.orange-text {
  color: #fd7b1b;
}
.blue-text {
  color: #1e73be;
}
.group {
  position: relative;
  margin-bottom: 45px;
}
.rule {
  height: 2px;
  background: #e8ebed;
  margin: 0px 35px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="regform">
  <form id="formreg">
    <div id="formtitle" class="form-title"><span class="orange-text">REGISTER &nbsp;</span>  <span class="blue-text">FOR ACCOUNT INFO </span>
    </div>
    <div id="formbody" class="form-body">
      <div id="group1" class="group">
        <input type="text"><span class="highlight"></span><span class="bar"></span>
        <label>Name</label>
      </div>
      <div id="group2" class="group">
        <input type="email"><span class="highlight"></span><span class="bar"></span>
        <label>Email</label>
      </div>
      <div id="group3" class="group">
        <input type="email"><span class="highlight"></span><span class="bar"></span>
        <label>Tel. Number</label>
      </div>
    </div>
    <div id="formbutton">
      <button type="button" class="button buttonBlue">Submit
        <div class="ripples buttonRipples"><span class="ripplesCircle"></span>
        </div>
      </button>
    </div>
  </form>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

如果使用的是JQuery，则只需将焦点放在元素上，然后设置相关值，即可使上面的标签自动滑到顶部。

示例：

HTML 

<div class="form-line">
    <input type="text" default="any-value" required name="file_name" class="form-control">
    <label class="form-label">File Name</label>
</div>

JS 

let input = $("input[name=file_name]");
input.trigger('focus').val("any-value");

它为我完美地工作了！

相关问题
最新问题