更改输入类型月份的默认视图

debugcn 发表于 Dev

乌斯曼

我正在使用input [type ='month']从用户获取到期日期。通常看起来像这样：[！[在此处输入图片描述] [1]] [1]

我想向用户显示：[！[在此处输入图片描述] [2]] [2]

能做到吗？

fatalcoder524

这称为输入屏蔽。这是一个简单的代码，您可以使用它掩盖输入而无需jQuery或任何其他插件。与其他插件相比，JS文件占用的空间非常少。有关更多详细信息，请参见此处。

input,input:hover,input:focus{
  font-family: monospace;
  border-width:0px;
border:none;
width:60px;
outline: none;
}
label {
  display: inline;
}
div {
  margin: 0 0 1rem 0;
}

.shell {
  position: relative;
  line-height: 1; }
  
  .shell span {
    position: absolute;
    left: 3px;
    top: 1px;
    color: #ccc;
    pointer-events: none;
    z-index: -1; }
    
.shell span i {
      font-style: normal;
      /* any of these 3 will work */
      color: transparent;
      opacity: 0;
      visibility: hidden; }

input.masked,
.shell span {
  font-size: 16px;
  font-family: monospace;
  padding-right: 10px;
  background-color: transparent;
  text-transform: uppercase; }

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/masking-input.js" data-autoinit="true"></script>

<label for="cc">Expiry Date:</label>
<input id="cc" type="text" placeholder="MM/YY" class="masked" pattern="(1[0-2]|0[1-9])\/(1[5-9]|2\d)" data-valid-example="05/18"/>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。