как: составное поле ввода последовательного ключа в родном JS - PullRequest
0 голосов
/ 24 апреля 2020

Я пытаюсь создать поле ввода Multipart для значения, подобного последовательному ключу, в проекте страницы бритвы ASP. NET.

Необходимо выполнить следующие требования:

  • 4 поля ввода
  • каждое поле ввода имеет указанную максимальную длину
  • оно должно быть предварительно заполнено
  • int должно всегда иметь начальные нули, если максимальная длина не достигается

Так что в данный момент я пытаюсь как-то ломать голову, но не очень успешно. У меня есть 4 поля ввода, и я выяснил, как усилить максимальную длину и как добавить ведущие нули. Но это работает не так, как должно, я знаю, почему, но я не знаю, как решить эту проблему.

Это будет единственное использование JS и любого другого форматирования, так что это причина Я не создавал классы или специальный файл. JS или даже использовал для этого фреймворк, такой как jQuery или Angular. Так что, очевидно, он должен быть в нативном JS.

HTML:

<div id="serialnumber" class="col-md-8 row">
    <input id="d-1" onkeyup="paddy(this, 3)" class="form-control col-md-2" minlength="3" maxlength="3"/>
    <input id="d-2" onchange="paddy(this, 2)" onkeyup="paddy(this, 2)" onclick="paddy(this, 2)" class="form-control col-md-2" style="margin: 0px 10px 0px 20px" minlength="2"/>
    <input id="d-3" onchange="paddy(this, 4)" onkeyup="paddy(this, 4)" onclick="paddy(this, 4)" class="form-control col-md-2" style="margin: 0px 20px 0px 10px" minlength="4"/>
    <input id="d-4" onchange="paddy(this, 2)" onkeyup="paddy(this, 2)" onclick="paddy(this, 2)" class="form-control col-md-2" minlength="2"/>
</div>

JS:

<script>
    function paddy(input, padlen) {
        var padstring = "";
        switch (padlen) {
            case 4: padstring = "0000";
                break;
            case 3: padstring = "000";
                break;
            case 2: padstring = "00";
                break;
        }
        console.log("hallo" + padlen)
        input.value = (padstring + input.value).slice(-padlen);
    }
</script>

После того, как это работает, я мне все еще не хватает той части, где я собираю отдельные строки перед отправкой в ​​базу данных.

...