纯css实现输入框placeholder动效及输入校验

更新日期: 2019-09-03阅读: 2.7k标签: 输入框

背景

话不多说,我们能否用纯css实现以下效果:


答案是肯定的。

借助css:placeholder-shown :valid :invalid伪类及html5 input pattern 属性就可以实现,:placeholder-shown伪类目前兼容性如下:


直接上代码

html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="input-fill-box">
    <input class="input-fill" placeholder="邮箱" pattern="^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$" required>
    <a href="javascript:" class="clear">close</a>
    <label class="input-label">邮箱</label>
</div>
</body>
</html>

css:

.input-fill{
  width: 100%;
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  outline: none;
  padding: 20px 16px 6px;
  border: 1px solid transparent;
   background: #f5f5fa;
  border-radius:10px;
  transition: border-color .25s;
}
.input-fill:placeholder-shown::placeholder {
    color: transparent;
    
}
.input-fill-box {
  width: 50%;
    position: relative;
}
.input-label {
    position: absolute;
    left: 16px; top: 14px;
    pointer-events: none;
    color:#BEC1D9;
   padding: 0 2px;
    transform-origin: 0 0;
    pointer-events: none;
    transition: all .25s;
}
.input-fill:not(:placeholder-shown) ~ .input-label,
.input-fill:focus ~ .input-label {
    transform: scale(0.75) translate(0px, -14px);    
}
.input-fill:focus{
  border: 2px solid #1d31aa;
}

.clear{
  position:absolute;
  top:10px;
  right:-20px;
   display: none;
    transition: all .25s;
}
.input-fill::-ms-clear { display: none; }
.input-fill:not(:placeholder-shown) + .clear { display: inline; }

.input-fill:valid {
 border-color: green;
 box-shadow: inset 5px 0 0 green;
}
.input-fill:not(:placeholder-shown):invalid {
 border-color: red;
 box-shadow: inset 5px 0 0 red;
}

更多精彩内容请关注 https://github.com/abc-club/ 

来自:https://segmentfault.com/a/1190000020252161 

链接: https://fly63.com/article/detial/5092

通过js实现:input 限制输入数字和小数点

我们可以使用html5的type=number来限制input只能输入数字类型,但是会存在一定的兼容问题,而且在浏览器样式上会出现上下箭头的标示,显然这不是我们需要的,这篇文章就整理关于使用js来限制input的输入类型为数字和小数点的实现。

移动端H5页面_input获取焦点时,虚拟键盘挡住input输入框解决方法

在移动端h5开发的时候,发现如果input在页面底部,当触发input焦点的时候会弹出系统虚拟键盘,虚拟键盘会遮挡input输入框。这会很影响用户体验,于是在网上找到了如下的解决办法

完美兼容实现:解决textarea输入框限制字数长度(带统计功能)

extarea称文本域【文本区】,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到。textarea有maxlength属性,但是textarea不兼容ie8/9。如何实现textarea输入框限制字数长度的兼容问题呢?

textarea换行_在textarea中如何换行的实现总汇

html的textarea内容显示的时候怎么换行?输入的时候换了行,但是读取出来的时候是连在一起的,要怎么才可以显示换行?利用pre、替换 br 标签、直接在渲染标签元素上添加 white-space: pre-wrap | pre-line | pre

小程序批量监听输入框,对按钮样式进行控制

在input组件上绑定data-model=xxx bindinput=inputWatch,监听输入框输入:当输入11位手机号后,验证码按钮变为可点状态;当3个输入框都有值时(密码大于等于6位,手机11位)

vue实现输入框的模糊查询(节流函数的应用场景)

首先,我们来理解一下:节流函数首先是节流,就是节约流量、内存的损耗,旨在提升性能,在高频率频发的事件中才会用到,比如:onresize,onmousemove,onscroll,oninput等事件中会用到节流函数;输入框的模糊查询功能原理分析

js模拟实现输入框input事件

直接修改value值是无法触发对应元素的事件的。通过发送输入框input事件了, 可以触发。这里简单封装了一个方法.简单的调用:

如何清除input输入框历史下拉数据

当之前的input框输入了数据后,下次输入有历史记录。我们发现无论是清除cookie,还是删除浏览器历史记录,都没办法清空input下拉的历史记录信息。那么该如何解决该问题呢?

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!