猿问

使用空格验证用户输入

如何实时格式化用户输入?例如,用户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>


BIG阳
浏览 178回答 4
4回答

Qyouu

我找到了真正的答案。如果您愿意,这些期望被命名为“输入掩码”。您必须使用 3. 方库。其中一些在以下网站中列出:图书馆 1&nbsp;图书馆 2我选择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>&nbsp; &nbsp; function loadFunction() {&nbsp; &nbsp; &nbsp; &nbsp; // custom&nbsp; &nbsp; &nbsp; &nbsp; var cleaveCustom = new Cleave('.input-custom', {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; blocks: [1, 3, 3, 2, 2, 3, 3],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; delimiter: ' ',&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }</script><body onload="loadFunction()">&nbsp; &nbsp; A 936 447 02 40 ZGS 001&nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; &nbsp; <input class="input-custom" placeholder="Custom delimiter & blocks" />&nbsp; &nbsp; </div></body>

波斯汪

如果我们假设用户必须一个一个地写字符。这将起作用。<body>&nbsp; &nbsp; <input type="text" class="form-control" id="ds" name="ds" onkeypress="keyPress()" maxlength="23"></body><script>&nbsp; &nbsp; function keyPress() {&nbsp; &nbsp; &nbsp; &nbsp; var field = document.getElementById("ds");&nbsp; &nbsp; &nbsp; &nbsp; var text = field.value;&nbsp; &nbsp; &nbsp; &nbsp; if(text.length == 1 || text.length == 5&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; || text.length == 9 || text.length == 12&nbsp; &nbsp; &nbsp; &nbsp; || text.length == 15 || text.length == 19 ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var newText = text + " ";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; field.value = newText;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }</script>

UYOU

这是一个小例子。<div class="childDumpFile">&nbsp; &nbsp; &nbsp;<label for="ds">Dataset</label>&nbsp; &nbsp; &nbsp;<input type="text" class="form-control" id="ds" name="ds"></div><div class="test_ds"></div>带有 jquery 的 JS。$("#ds").change(function(){&nbsp; &nbsp; 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);&nbsp; $("#ds").val(temp);&nbsp; $(".test_ds").html(temp);});这是一个演示 - https://jsfiddle.net/Kistlak/7bkdtev8

慕桂英546537

首先,您需要在输入中添加 onchange="getTimeNow()" oninput="getTimeNow()"<input&nbsp;type="text"&nbsp;class="form-control"&nbsp;id="ds"&nbsp;name="ds"&nbsp;value="{{Request::get('ds')&nbsp;??&nbsp;''}}"&nbsp;onchange="getTimeNow()"&nbsp;oninput="getTimeNow()">最后,您将获得事件输入文本<script>function&nbsp;getTimeNow(){console.log(new&nbsp;Date())}</script>
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答