如何以许可证格式自动格式化文本框？

Question

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

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

Answer 1

您可以通过为您创建的输入字段指定标签来执行此操作。例如......

#text-input {
    border: none;
    outline: none;
}
label{
    border:solid 1px black;
    padding-right: 2px;
}

<label for="text-input">
  furniture chair square
  <input type="text" id="text-input" />
</label>

Answer 2

这是jwa＆post文章和RegEx的一些参考：

＆＃13;

＆＃13;

$(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');
});

＆＃13;

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

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

div.card {
  margin: 5px;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

  

如何包含数字？

在此行[^a-z0-9]

中使用this.value.replace(/[^a-z]/gi, '')

＆＃13;

＆＃13;

$(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');
});

＆＃13;

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

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

div.card {
  margin: 5px;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用RegExp解决您的问题。

您可以添加一些CSS或附加文本以注意用户错误输入。

function checkStr(str){
    //check pattern
    result = str.match(/^Furniture\/Chair\/Square([a-zA-Z\/]+)?/)
    if(result == null || result[0].length !== str.length){
      //revert the input field to default
      document.getElementById('userText').value = "Furniture/Chair/Square"
    }
}

<input type="text" value="Furniture/Chair/Square" id="userText" oninput="checkStr(value)"></input>
<p id='asd'></p>