javascript - 如何将我的文本框自动格式化为许可证格式？

Question

我尝试在互联网上搜索答案，但我能找到的最接近的答案是 this jfiddle

我想做的是，当页面加载时，文本框会自动填充这些词Furniture/Chair/Square。此外，用户可以在单词旁边输入一些文本，例如 Furniture/Chair/Square/_ _ _/_ _ _。用户无法删除自动填充的单词。

Answer 1

这是一种解决方法，引用了 jwa 的帖子和正则表达式:

$(function() {
  $('label.prefilled input[type="text"][placeholder]').on('input', function() {
    var fmt = this.placeholder.split('');
    var len = this.placeholder.match(/_/g).length;
    var val = this.value.replace(/[^a-z]/gi, '').split('').slice(0, len);
    var res = '',
      v, f;
    while ((v = val.shift()) && (f = fmt.shift())) {
      if ('_' === f) {
        res += v;
      } else {
        res += f + v;
        fmt.shift();
      }
    }
    res += fmt.join('');
    this.value = res;
  }).trigger('input');
});

label.prefilled input[type="text"] {
  border: none;
  outline: none;
}

label.prefilled {
  border: 1px ridge gray;
}

div.card {
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">
  <label class='prefilled'>
  Furniture/Chair/Square/<input type="text" placeholder="___/___"/>
</label>
</div>
<div class="card">
  <label class='prefilled'>
  Electronic/Handheld/<input type="text" placeholder="______/______"/>
</label>
</div>

How do I include numbers?

在此行中使用[^a-z0-9] this.value.replace(/[^a-z]/gi, '')

$(function() {
  $('label.prefilled input[type="text"][placeholder]').on('input', function() {
    var fmt = this.placeholder.split('');
    var len = this.placeholder.match(/_/g).length;
    var val = this.value.replace(/[^a-z0-9]/gi, '').split('').slice(0, len);
    var res = '',
      v, f;
    while ((v = val.shift()) && (f = fmt.shift())) {
      if ('_' === f) {
        res += v;
      } else {
        res += f + v;
        fmt.shift();
      }
    }
    res += fmt.join('');
    this.value = res;
  }).trigger('input');
});

label.prefilled input[type="text"] {
  border: none;
  outline: none;
}

label.prefilled {
  border: 1px ridge gray;
}

div.card {
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">
  <label class='prefilled'>
  Furniture/Chair/Square/<input type="text" placeholder="___/___"/>
</label>
</div>
<div class="card">
  <label class='prefilled'>
  Electronic/Handheld/<input type="text" placeholder="______/______"/>
</label>
</div>