Question

这是目前的形式：

<form>  
    Telephone:
    <input type="text" name="telephone">
</form>

我想为此输入设置一个遮罩，以便它有一个像xx-xx-xx这样的遮罩。

Answer 1

你可以试试这个：

<html>
<body>
<head>
<style>
input {
  font-family: monospace;
}
label {
  display: block;
}
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; }
</style>
</head>
<html>
<body>
<form action=""> 
  <div>
    <label for="phn">Phone number</label>
    <input id="phn" name="telephone" placeholder="XX - XX - XX" pattern="\w\d\w \d\w\d" class="masked" />
  </div>

</form>

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

</body>
</html>

Answer 2

您可以在HTML中使用占位符。

<form>  
    Telephone:
    <input type="text" name="telephone" placeholder="xx-xx-xx">
</form>

但是，当用户开始输入时，占位符将会消失。

HTML格式的掩码格式

2 个答案: