Проверить ввод пользователя с пробелами - PullRequest
Новая
       43

Проверить ввод пользователя с пробелами

1 голос
/ 07 апреля 2020

Как в режиме реального времени вводить данные пользователя? Например, пользователь помещает 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>

Ответы [ 4 ]

1 голос
/ 10 апреля 2020

Я нашел верный ответ. Эти ожидания называются «маской ввода» и, если хотите, использовать. Вы должны использовать 3. сторонние библиотеки. Некоторые из них перечислены на следующих сайтах:

Библиотеки 1 Библиотеки 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>
    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>
1 голос
/ 07 апреля 2020

Если предположить, что пользователи должны писать символы один за другим. Это будет работать. 

<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>
0 голосов
/ 07 апреля 2020

Вот небольшой пример. 

<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);
});

Вот демонстрация - https://jsfiddle.net/Kistlak/7bkdtev8

0 голосов
/ 07 апреля 2020

Во-первых, вам нужно добавить 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>
...