时间戳

首页 > 解决方案 > 更改输入类型月份的默认视图

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

问题描述

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

我想像这样向用户展示：[![在此处输入图像描述][2]][2]

这可以实现吗？

标签： javascripthtmlcssruby-on-rails

解决方案

这称为输入屏蔽。这是一个简单的代码，您可以使用它在没有 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"/>

推荐阅读