2009-03-11 9 views
2

J'utilise le plugin .alphanumeric pour jQuery qui fait certainement ce à quoi je m'attendrais lorsque les utilisateurs tapent directement dans la zone de texte. Mais, si un utilisateur devait copier et coller une valeur dans la zone de texte, tous les paris sont désactivés.jQuery AlphaNumericPlugin - Copier Coller Éditer

$("#<%= txtNumber.ClientID %>").alphanumeric({allow:"-"}); 

Je peux certainement le faire:

$(document).ready(function() { 
    $("#<%= txtNumber.ClientID %>").blur(function() { 
     $("#<%= txtNumber.ClientID %>").val(
      RemoveInvalidCharacters(
       $("#<%= txtNumber.ClientID %>").val() 
      ) 
     ); 
    }); 
}); 

//FUNCTION REMOVES ANY ; IN TEXT TO PREVENT SQL INJECTION 
function RemoveInvalidCharacters(text) { 
    return text.replace(';', ''); 
} 

Mais ... Je préfère ne pas avoir à Kluge mon code de fonctions encore plus loin avec .blur(). Y a-t-il d'autres moyens de contourner cela? Copier et coller est définitivement un défi pour les entrées masquées.

+1

Vous ne devez pas compter sur le script côté client pour faire quoi que ce soit, mais fournir à l'utilisateur une meilleure expérience. La validation côté serveur et les requêtes paramétrées sont ce dont vous avez besoin pour vous assurer que les données sont propres et que votre base de données est protégée. –

+0

J'utilise LINQ to SQL sur mon backend qui s'occupe déjà de ça pour moi ... J'essaie juste de faire correspondre le frontend à ce que le backside est en train de faire ... – RSolberg

+0

http://msdn.microsoft.com/ en-us/library/bb386929.aspx – RSolberg

Répondre

3

Manipulation de la événement pâte est assez simple. J'utilise cette technique dans mon masked input plugin avec de bons résultats. ne hésitez pas à parcourir la source pour le voir utilisé.

Voici les bits correspondants modifiés pour votre exemple ci-dessus.

var pasteEventName = $.browser.msie ? 'paste' : 'input'; 
$("#<%= txtNumber.ClientID %>").bind(pasteEventName, function() { 
    setTimeout(function() { 
     RemoveInvalidCharacters(
     $("#<%= txtNumber.ClientID %>").val() 
    ); 
    }, 0); 
}); 
+0

Ceci est très utile .. merci! – Aeon

0

Avez-vous considéré le "codage" des caractères spéciaux lorsque le formulaire est soumis par opposition à lorsque l'utilisateur entre des valeurs? Nous faisons la même chose pour permettre aux utilisateurs d'entrer dans le < et> dans TextBoxes (on les convertit à & lt; et & gt;. Via javascript, puis de nouveau pour < et> dans le code derrière

0

De cette façon, vous ne serez pas pré évacuer une injection SQL. Je ne suis pas obligé d'utiliser votre formulaire, je peux faire le mien et le POSTER à votre script. Encore plus simple: je peux désactiver javascript et aller déposer votre base de données.

À la place, vérifiez la validité d'entrée du côté serveur.

Les moyens les plus simples sont de l'échapper ou d'utiliser des requêtes paramétrées.

1

Moi aussi, je suis une solution ayant besoin de problème de pâte, et je compris quelque chose qui fonctionne pour moi. Une personne peut toujours utiliser le menu Edition> Coller dans le navigateur, mais Ctrl-V, ainsi que le collage du clic droit sont gérés. Testé dans FF, IE, Opera, Safari, Chrome:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Only Allow Certain Characters</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
</head> 
<body> 
    <br> 
    <form id="myform" action=""> 
     <input id="element1" name="mytext1" type="text"> 
     <input id="element2" name="mytext2" type="text"> 
    </form> 
<script> 
    /* removes evil chars while typing */ 
    (function($){ 
     $.fn.disableChars = function(a) { 

      a = $.extend({ 
       allow: '' 
      }, a); 

      b = a.allow.split(''); 
      for (i=0; i<b.length; i++) b[i] = "\\" + b[i]; 
      a.allow = b.join(''); 

      var regex = new RegExp('[^a-z0-9' + a.allow + ']', 'ig'); 

      $(this) 
      .bind('keyup blur', function() { 
       if (this.value.search(regex) != '-1') { 
        this.value = this.value.replace(regex, ''); 
       } 
      }) 
      .bind('contextmenu',function() {return false}); 

     } 
    })(jQuery); 

    $("#element1").disableChars(); 
    $("#element2").disableChars({allow:".,:-() "}); 
</script> 
</body> 
</html> 
+1

Cela peut fonctionner, mais la question disait: «Je préférerais ne pas avoir à ajouter mon code avec les fonctions .blur()». L'affiche cherchait donc une alternative à une telle approche. – GargantuChet

Questions connexes