使用空格验证用户输入
Validate user input with whitespace
如何实时格式化用户输入?例如,用户将 A9364470240ZGS001
放入输入字段,并使用 JavaScript 在输入字段中实时将其格式化为: A 936 447 02 40 ZGS 001
?
<div class="childDumpFile">
<label for="ds">Dataset</label>
<input type="text" class="form-control" id="ds" name="ds" value="{{Request::get('ds') ?? ''}}">
</div>
首先需要在input
中加入onchange="getTimeNow()" oninput="getTimeNow()"
<input type="text" class="form-control" id="ds" name="ds" value="{{Request::get('ds') ?? ''}}" onchange="getTimeNow()" oninput="getTimeNow()">
最后,你得到事件输入文本
<script>function getTimeNow(){console.log(new Date())}</script>
这是一个小例子。
<div class="childDumpFile">
<label for="ds">Dataset</label>
<input type="text" class="form-control" id="ds" name="ds">
</div>
<div class="test_ds"></div>
JS 与 jquery.
$("#ds").change(function(){
var ds_value = $("#ds").val();
var temp = ds_value;
temp = temp.substring(0,1) + " " + temp.substring(1, 4) + " " + temp.substring(4, 7) + " " + temp.substring(7, 9) + " " + temp.substring(9, 11) + " " + temp.substring(11, 14) + " " + temp.substring(14, 17);
$("#ds").val(temp);
$(".test_ds").html(temp);
});
如果我们假设用户必须一个一个地写字符。这会起作用。
<body>
<input type="text" class="form-control" id="ds" name="ds" onkeypress="keyPress()" maxlength="23">
</body>
<script>
function keyPress() {
var field = document.getElementById("ds");
var text = field.value;
if(text.length == 1 || text.length == 5
|| text.length == 9 || text.length == 12
|| text.length == 15 || text.length == 19 ) {
var newText = text + " ";
field.value = newText;
}
}
</script>
我找到了正确的答案。这些期望被命名为 "input-mask" 并且如果您想使用。你必须使用 3.party 库。其中一些在以下网站中列出:
你的问题我选择了Cleave.js
。这是演示:
<script src="https://nosir.github.io/cleave.js/dist/cleave.min.js"></script>
<script src="https://nosir.github.io/cleave.js/dist/cleave-phone.i18n.js"></script>
<script>
function loadFunction() {
// custom
var cleaveCustom = new Cleave('.input-custom', {
blocks: [1, 3, 3, 2, 2, 3, 3],
delimiter: ' ',
});
}
</script>
<body onload="loadFunction()">
A 936 447 02 40 ZGS 001
<div class="container">
<input class="input-custom" placeholder="Custom delimiter & blocks" />
</div>
</body>
如何实时格式化用户输入?例如,用户将 A9364470240ZGS001
放入输入字段,并使用 JavaScript 在输入字段中实时将其格式化为: A 936 447 02 40 ZGS 001
?
<div class="childDumpFile">
<label for="ds">Dataset</label>
<input type="text" class="form-control" id="ds" name="ds" value="{{Request::get('ds') ?? ''}}">
</div>
首先需要在input
中加入onchange="getTimeNow()" oninput="getTimeNow()"<input type="text" class="form-control" id="ds" name="ds" value="{{Request::get('ds') ?? ''}}" onchange="getTimeNow()" oninput="getTimeNow()">
最后,你得到事件输入文本
<script>function getTimeNow(){console.log(new Date())}</script>
这是一个小例子。
<div class="childDumpFile">
<label for="ds">Dataset</label>
<input type="text" class="form-control" id="ds" name="ds">
</div>
<div class="test_ds"></div>
JS 与 jquery.
$("#ds").change(function(){
var ds_value = $("#ds").val();
var temp = ds_value;
temp = temp.substring(0,1) + " " + temp.substring(1, 4) + " " + temp.substring(4, 7) + " " + temp.substring(7, 9) + " " + temp.substring(9, 11) + " " + temp.substring(11, 14) + " " + temp.substring(14, 17);
$("#ds").val(temp);
$(".test_ds").html(temp);
});
如果我们假设用户必须一个一个地写字符。这会起作用。
<body>
<input type="text" class="form-control" id="ds" name="ds" onkeypress="keyPress()" maxlength="23">
</body>
<script>
function keyPress() {
var field = document.getElementById("ds");
var text = field.value;
if(text.length == 1 || text.length == 5
|| text.length == 9 || text.length == 12
|| text.length == 15 || text.length == 19 ) {
var newText = text + " ";
field.value = newText;
}
}
</script>
我找到了正确的答案。这些期望被命名为 "input-mask" 并且如果您想使用。你必须使用 3.party 库。其中一些在以下网站中列出:
你的问题我选择了Cleave.js
。这是演示:
<script src="https://nosir.github.io/cleave.js/dist/cleave.min.js"></script>
<script src="https://nosir.github.io/cleave.js/dist/cleave-phone.i18n.js"></script>
<script>
function loadFunction() {
// custom
var cleaveCustom = new Cleave('.input-custom', {
blocks: [1, 3, 3, 2, 2, 3, 3],
delimiter: ' ',
});
}
</script>
<body onload="loadFunction()">
A 936 447 02 40 ZGS 001
<div class="container">
<input class="input-custom" placeholder="Custom delimiter & blocks" />
</div>
</body>