Comment au format en temps réel entrée utilisateur? Par exemple, l'utilisateur met A9364470240ZGS001 dans le champ de saisie, et en utilisant le format JavaScript dans le champ de saisie en temps réel pour qu'il ressemble à: 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>
1
Domantas Šlaičiūnas 7 avril 2020 à 13:03

4 réponses

Meilleure réponse

J'ai trouvé la vraie réponse. Ces attentes sont appelées "masque de saisie" et si vous souhaitez les utiliser. Vous devez utiliser des bibliothèques 3. de parti. Certains d'entre eux listant dans les sites suivants:

Bibliothèques 1 Bibliothèques 2

J'ai choisi Cleave.js pour votre question. Voici la démo:

<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
Kerim 10 avril 2020 à 12:31

Tout d'abord, vous devez ajouter onchange = "getTimeNow ()" oninput = "getTimeNow ()" pour entrer

<input type="text" class="form-control" id="ds" name="ds" value="{{Request::get('ds') ?? ''}}" onchange="getTimeNow()" oninput="getTimeNow()">

Enfin, vous obtenez un texte d'entrée d'événement

<script>function getTimeNow(){console.log(new Date())}</script>
-1
D z 7 avril 2020 à 10:19

Voici un petit exemple.

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

Voici une démo - https://jsfiddle.net/Kistlak/7bkdtev8

-1
Kistlak Rajapaksha 7 avril 2020 à 10:41

Si nous supposons que les utilisateurs doivent écrire les caractères un par un. Cela fonctionnera.

<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>
1
Kerim 7 avril 2020 à 11:22