JS/Jquery，有办法用固定字符串和前导零填充输入文本吗？

Question

我计划有一个输入文本框的前导字符串和零的最大长度为6个前导零。当用户在输入框中输入时，前导零将被擦除，直到达到最大6个字母。初始字符串是固定的，不能擦除。

例如,

JS000000 //a fixed string (which is the letter 'JS') followed by 6 leading zeros
JS000010 //user has typed the letter '10'
JS123456 //user has typed the letter '123456' and cannot be type further

<input type="text" name="js" class="form-control" id="js_leading_zero">

JS/JQUERY

$('#js_leading_zero').on('keyup', function() {
    console.log('i really have no ideas what to do here')
});

Answer 1

正如@RokoC.Buljan所建议的，您可以更改模糊值，否则，需要考虑的事情太多了。

其中一个例子是：

​

const inputField = document.getElementById('js_leading_zero')

inputField.addEventListener('blur', updateInput);

function updateInput(e) {
  inputField.value = inputField.value.padStart(6, '0')
}

JS<input type="text" name="js" class="form-control" id="js_leading_zero" placeholder="000000" maxlength="6">

​

更新：@RokoC.Buljan更新占位符的方法是一种创新的方法：https://jsfiddle.net/RokoCB/bdzyughs/2/

Answer 2

管理input插入符号的另一种方法是使用带有css的可聚焦div来“伪造”"JS“部分*。

然后，您可以使用相对最少的代码来处理输入上的键--这只是为了概念，您可能希望它更整洁一些，有一些像样的变量名，并将val存储在输入本身上，这样它就可以重用：

​

var val = 0;
$("#inp").on("keyup", function(e) {
  var c = String.fromCharCode(e.which);
  if (c >= '0' && c <= '9' && (val + "").length < 6) {
    val = (val * 10) + (c * 1);
  }
  if (e.which == 8) {
    val = Math.floor(val / 10);
  }
  $(this).text(("000000" + val).slice(-6))
})

div:focus { 
/* stupid chrome currently puts an ugly black border, so need something else border:1px solid red; */
background-color: aqua;
}

.inpwrapper {
  border:1px solid #CCC;
  padding:2px;
}
.inpwrapper span { float:left; margin: 2px 0 2px 0; }
.inpwrapper div { margin:2px 6px 2px 0; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='inpwrapper'>
  <span>JS</span>
  <div id="inp" tabindex="0">000000</div>
</div>

<hr /> another input to demonstrate tab-focus
<input type='text'>

​

(*)实际上，不需要使用“假”css部件，可以使用：.text("JS" + ("000000" + val).slice(-6))

Answer 3

我从注释中建议使用"JS"部分作为一个单独的实体，以及blur和focus事件，但也允许将输入重置为一个新值。

诀窍是将当前值存储到元素placeholder中。如果没有输入任何值，请再次使用占位符值作为元素实际值：

​

const updateVal = (ev) => {
  const EL = ev.currentTarget;
  EL.value = EL.value.length ? EL.value.padStart(6, '0') : EL.placeholder;
  EL.placeholder = EL.value;
};

const clearVal = (ev) => {
  const EL = ev.currentTarget;
  EL.value = "";
};

const inputField = document.querySelectorAll('.js_leading_zero');
inputField.forEach(EL => EL.addEventListener("blur", updateVal));
inputField.forEach(EL => EL.addEventListener("focus", clearVal));

* {box-sizing: border-box;}

.js_leading_zero_label {
  border: 1px solid #000;
  font: 1em sans-serif;
  padding: 4px;
}

.js_leading_zero {
  outline: none;
  border: none;
  background: transparent;
  font: 1em sans-serif;
}

<label class="js_leading_zero_label">
  JS<input type="text" class="js_leading_zero" placeholder="000000" maxlength="6">
</label>
<label class="js_leading_zero_label">
  JS<input type="text" class="js_leading_zero" placeholder="000000" maxlength="6">
</label>

​