web-dev-qa-db-fra.com

Autoriser uniquement les nombres et ctrl + a, ctrl + v, ctrl + c dans une zone de texte


J'essaie d'autoriser les utilisateurs à saisir uniquement des nombres et à copier et coller le contrôle dans la zone de texte. Je suis en mesure de restreindre l'utilisateur à entrer uniquement des chiffres mais copier, coller ne fonctionne pas pour moi, aidez-moi à résoudre ce problème.

Voici mon script:

$(".allow_only_numbers").keydown(function (e) {
    var ctrlDown = false;
    var ctrlKey = 17, vKey = 86, cKey = 67;
    if (e.keyCode === ctrlKey){
        ctrlDown = true;
    }
    // Allow: backspace, delete, tab, escape, enter and .
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 ||
            // Allow: Ctrl
        (e.keyCode === ctrlKey) ||
            // Allow: Ctrl+A
        (e.keyCode === 65 && e.ctrlKey === true) ||
            // Allow: Ctrl+v
        (e.keyCode === vKey && ctrlDown) ||
            // Allow: Ctrl+c
        (e.keyCode === cKey && ctrlDown) ||
            // Allow: home, end, left, right, down, up
        (e.keyCode >= 35 && e.keyCode <= 40)) {
        // let it happen, don't do anything
        return;
    }
    // Ensure that it is a number and stop the keypress
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
        e.preventDefault();
    }
});

Voici le lien jsfiddle:

https://jsfiddle.net/sureshpattu/stwzhceL/1/

javascriptjqueryregexkeycode
13
Suresh Pattu

Essayez avec event.keyCode et event.metaKey comme ça.

$(document).ready(function() {
  $(".allow_only_numbers").keydown(function(e) {
    // Allow: backspace, delete, tab, escape, enter and .
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
      // Allow: Ctrl+A,Ctrl+C,Ctrl+V, Command+A
      ((e.keyCode == 65 || e.keyCode == 86 || e.keyCode == 67) && (e.ctrlKey === true || e.metaKey === true)) ||
      // Allow: home, end, left, right, down, up
      (e.keyCode >= 35 && e.keyCode <= 40)) {
      // let it happen, don't do anything
      return;
    }
    // Ensure that it is a number and stop the keypress
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
      e.preventDefault();
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="number" class="allow_only_numbers" />

MODIFIER:

Supprimez les extraits de code suivants de votre code.

var ctrlDown = false;
var ctrlKey = 17, vKey = 86, cKey = 67;
if (e.keyCode === ctrlKey) {
    ctrlDown = true;
}

Parce que ctrlDown sera false tout en appuyant sur C et V pour copier et coller. Et donc votre ctr+c et ctrl+v ne fonctionne pas.

18
John R
$(".allow_only_numbers").on("input",function (e) {
  e.target.value = e.target.value.replace(/[^0-9]/g,'')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="allow_only_numbers" />
6
Shanimal
$(".allow_only_numbers").keydown(function (e) {
        var isModifierkeyPressed = (e.metaKey || e.ctrlKey || e.shiftKey);
        var isCursorMoveOrDeleteAction = ([46,8,37,38,39,40].indexOf(e.keyCode) != -1);
        var isNumKeyPressed = (e.keyCode >= 48 && e.keyCode <= 58) || (e.keyCode >=96 && e.keyCode <= 105);
        var vKey = 86, cKey = 67,aKey = 65;
        switch(true){
            case isCursorMoveOrDeleteAction:
            case isModifierkeyPressed == false && isNumKeyPressed:
            case (e.metaKey || e.ctrlKey) && ([vKey,cKey,aKey].indexOf(e.keyCode) != -1):
                break;
            default:
                e.preventDefault();
        }
});

voici un exemple de travail

https://jsfiddle.net/stwzhceL/8/

cela vous permet ctrl+a, ctrl+c et ctrl+v ainsi que les touches fléchées, la touche de suppression et la touche de retour arrière.

et ce code couvre également mac. (qui est cmd+a/cmd+c/cmd+v)

1
suish
function numbersonly(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}
0
kfreeman04208

De la réponse @Shanimal. c'est ma angular js. pour utiliser uniquement le nombre dans votre entrée.

.directive('onlyNumber', function() {
        return  {
            restrict: 'A',
            link: function (scope, Elm, attrs, ctrl) {
                Elm.on("propertychange input",function (event) {
                    event.target.value = event.target.value.replace(/[^0-9]/g,'');
                });
            }
        };
    })

utilisez simplement 'only-number' pour votre élément. exemple :

<input type="text" data-ng-model="number" placeholder="number"id="cifNumber" only-number/>
0
johan indra Permana

Cela devrait vous donner une idée. Désolé, je suis sur un Mac et pour autant que je sache, e.ctrlKey et autres ne fonctionnent pas sur Mac.

var mod;

var ouput = jQuery('#output');


var numeric = jQuery('#numeric').keydown(function(e){
  mod = e.which;
  
  if(!(e.which >= 48 && e.which <= 57) && (e.which != 8)
  && (mod && (e.which == 67 || e.which != 86))){
      e.preventDefault();
  }
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='numeric'/>

<label id='output'></label>
0
Gacci

Si vous remplacez votre événement keydown par un événement keyup, vous pouvez utiliser e.ctrlKey, qui sera true lorsque la touche ctrl est enfoncée.

0
Moishe Lipsker