html - 占位符应该在键入输入时上升,而不使用使用css的必需和占位符属性
问题描述
当我输入输入字段标签应该上升。否则标签应放置在输入内。我已附上示例图像。请参考该图像中的用户名和密码字段。
代码 :
<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 动画。我不想使用这些属性。
解决方案
这些被称为“浮动标签”。看看这些:
- https://css-tricks.com/float-labels-css/
- 如何在 CSS 中浮动标签
- https://medium.com/simple-human/floating-labels-are-a-bad-idea-82edb64220f6
您确实需要使用 placeholder 属性,但您可以将其设置为 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=" ">
<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>
推荐阅读
- flutter - 如何在 Flutter 中阅读 Epub?
- sas - 在 SAS 中使用 %Dropmiss 宏时出错
- javascript - 根据两个属性值对对象数组进行排序
- javascript - 检索按两个子值排序的数据
- javascript - 使用没有 'entry' index.js 的 webpack 插件
- django - 无法在 django 中获取属于 User 的 Profile 对象
- excel - “您为工作表或图表输入了无效名称”,需要更新代码
- json - 如何在角度材料多选中隐藏嵌套选择中未选择的选项项目?
- python - Scrapy 简单的 LinkExtractor 示例不起作用
- python - Pyspark:从 Python 到 Pyspark 实现 lambda 函数和 udf