Question

当我键入内容时，输入字段标签应该会向上。否则，标签应放在输入中。我已附上示例图片，请参考该图片中的用户名和密码字段。

代码：

<div class="form-group">
    <div class="row">
        <div class="col-md-12">
            <input type="text" class="">
            <label placeholder="Full Name*"></label>
        </div>
    </div>
</div>

我只想使用输入和标签字段。我不想使用“必需”或“占位符”属性。我已经介绍了许多网站，他们都使用“有效”或“占位符”属性完成了css动画。我不想使用这些属性。

Answer 1

这些被称为“浮动标签”。看看这些：

您确实需要使用占位符属性，但是可以将其设置为HTML实体的空格字符（ ），因此它是不可见的。我这样做是为了实现最大的浏览器兼容性（除非它在IE9或更早版本中不起作用）。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

.field {
    margin: 0 auto .5em;
    padding-top: 1.5em;
    position: relative;
}
/* Note that the <label> has to come after the field. for the CSS-only way to work. */
.field input:not([type=checkbox]):not([type=radio])~label,
.field textarea~label {
    position: absolute;
    top: .125em;
    left: .125em;
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
    transform: translate3d(0,0,0);
    -webkit-transition: all .5s .5s;
    -moz-transition: all .5s .5s;
    transition: all .5s .5s;
}
body .field[class] input[type]:-moz-placeholder~label,
.field textarea:-moz-placeholder~label {
    -moz-transform: translateY(1.5em);
    transform: translateY(1.5em);
    cursor: text;
}
body .field[class] input[type]:-ms-input-placeholder~label,
.field textarea:-ms-input-placeholder~label { /* IE10-11 but not MS Edge */
    transform: translateY(1.5em);
    cursor: text;
}
body .field[class] input[type].placeholder-shown~label,
.field textarea.placeholder-shown~label { /* class added by the polyfill when applicable */
    -moz-transform: translateY(1.5em);
    -webkit-transform: translateY(1.5em);
    transform: translateY(1.5em);
    cursor: text;
}

/* Remember that unsupported pseudo-elements cause whole rules to be ignored, hence the repitition. */
body .field[class] input[type]:placeholder-shown~label,
.field textarea:placeholder-shown~label{
    transform: translateY(1.5em);
    transform: translate3d(0,1.5em,0);
    cursor: text;
}
/* The selectors here get tricky due to specificity issues. I tried to make the 
selectors fairly generic. If you have sufficient control over the markup,
the ":not()" and "[type]" selectors could be removed. */
.field[class] input:not([type=checkbox]):not([type=radio]):focus~label,
.field textarea:focus~label,
.field input:not([type=checkbox]):not([type=radio]):valid~label,
.field textarea:valid~label {
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
    transform: translate3d(0,0,0);
    -webkit-transition: all .25s;
    -moz-transition: all .25s;
    transition: all .25s;
}
</style>
</head>
<body>

<div class="field">
    <input type="text" id="field1" placeholder="&#32;">
    <label for="field1">My First Field</label>
</div> <!-- /.field -->
<div class="field">
    <input type="text" id="field2" placeholder="&#32;" value="some text">
    <label for="field2">Another Field</label>
</div> <!-- /.field -->

<p>This works, without JS, in evergreen browsers (Firefox, Chrome, Safari, etc.) and 
IE10-11. A polyfill is used to support 
<a href="https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/12435951--placeholdershown-css-pseudo-class">MS Edge</a> (support for the 
IE10 pseudo-class was removed but the non-prefixed one was not added) and 
old versions of browsers from other organizations.</p>

<script>
if (window.NodeList && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
}
/*!
* Polyfill for pseudo selector :placeholder-shown
* Author: Subash Selvaraj (github userid:sesubash) & enhanced by Kravimir
*/
(function(){var d=document,u=null,o={init:function(){var p="placeholder",h=d.querySelector("head"),t=d.createElement("input"),s=d.createElement("style"),r="{padding-top:183px}";t.setAttribute("id","PhSTf");t.setAttribute(p,"\x20");s.textContent="#PhSTf{position:absolute;visibility:hidden}#PhSTf:"+p+"-shown"+r+"#PhSTf:-ms-input-"+p+""+r+"#PhSTf:-moz-"+p+r;h.appendChild(s);t=d.body.appendChild(t);var y=window.getComputedStyle(t,u).paddingTop;d.body.removeChild(t);h.removeChild(s);if(y==="183px"){d.documentElement.classList.add("placeholderPseudo");return}d.querySelectorAll("input["+p+"],textarea["+p+"]").forEach(function(i){if(i.getAttribute(p)!="")o.update.call(i);for(var n=0,a=["blur","keyup","input"];n<a.length;n++)i.addEventListener(a[n],o.update,u);})},update:function(){this.classList[this.value?"remove":"add"]("placeholder-shown");for(var l=this.nextSibling;l;l=l.nextSibling)if(l.nodeType==1&&l.nodeName.toLowerCase()=='label')l.classList.toggle('androidFix');}};if(/^[ci]|d$/.test(d.readyState||"")){o.init()}else{d.addEventListener("DOMContentLoaded",o.init,u)}window.placeholderShownPolyfill=o;d.documentElement.classList.add("phsJS")})();
</script>
</body>
</html>

在不使用必填项和使用CSS的占位符属性的情况下键入输入时，占位符应上升

1 个答案: