在不使用必填项和使用CSS的占位符属性的情况下键入输入时，占位符应上升 [英] Placeholder should go up while typing input without using required and placeholder attribute using css
本文介绍了在不使用必填项和使用CSS的占位符属性的情况下键入输入时，占位符应上升的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我键入内容时，输入字段标签应该会向上.否则，标签应放置在输入中.我已附上示例图片，请参考该图片中的用户名和密码字段.
When I type the input field label should go up. otherwise label should be placed inside the input. I have attached the sample image.Please refer the username and password field in that image.
代码:
<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动画.我不想使用这些属性.
I want to use only input and label field. I don't want to use either "required" or "placeholder" attribute. I have referred many website, all of them done the css animations using "valid" or "placeholder" attribute. I don't want to use those attributes.
推荐答案
这些被称为浮动标签".看看这些:
Those are called "floating labels". Have a look at these:
- https://css-tricks.com/float-labels-css/
- 如何在CSS中进行标签浮动
- https://medium.com/simple -human/floating-labels are a Bad-idea-82edb64220f6
- https://css-tricks.com/float-labels-css/
- How to do floating of labels in CSS
- https://medium.com/simple-human/floating-labels-are-a-bad-idea-82edb64220f6
您确实需要使用占位符属性，但是可以将其设置为HTML实体的空格字符( )，因此它是不可见的.我这样做是为了最大程度地提高浏览器兼容性(除非它在IE9或更早版本中不起作用).
You do need to use the placeholder attribute, but you can set it to the HTML entity for a space character ( ), so it's invisible. I wrote this for maximum browser compatibility (except it doesn't work in IE9 or older).
<!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=" ">
<label for="field1">My First Field</label>
</div> <!-- /.field -->
<div class="field">
<input type="text" id="field2" placeholder=" " 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的占位符属性的情况下键入输入时，占位符应上升的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
