2009-03-11 35 views
2

jQuery用の.alphanumericプラグインを使用しています。これは、ユーザーがテキストボックスに直接入力するときに期待していることを確実にしています。しかし、ユーザーがテキストボックスに値をコピーして貼り付けると、すべてのベットがオフになります。jQuery AlphaNumericPlugin - コピー貼り付けの問題

$(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(';', ''); 
} 

をしかし...私はむしろ()関数.blurでさらにクルーゲまでに私のコードを持っていないと思います。

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

私は確かにこれを行うことができます。これを回避する方法は他にありますか?

+1

クライアント側のスクリプトを使用してユーザーの操作性を向上させる必要はありません。サーバー側の検証とパラメータ化されたクエリは、データがきれいで、データベースが保護されていることを確認するために必要なものです。 –

+0

私はLINQ to SQLをバックエンドで使用していますが、これは私のためにすでに処理されています...フロントエンドにバックサイドがやっていることを一致させようとしています... – RSolberg

+0

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

答えて

3

取り扱い当社は、ユーザーが<と>のTextBox内の文字(私たちは& LTに変換が入力できるように同じことを行いますpasteイベントはここで

。使用でそれを見るために、ソースを閲覧すること自由に感じなさい。私は私のmasked input plugin良い結果として、この技術を使用しています。非常に簡単です上記のあなたの例のために変更関連ビットである。

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

これは非常に便利です..ありがとう! – Aeon

0

マスクされた入力の場合、コピーアンドペーストは間違いなく課題です。

ユーザーが値を入力したときとは異なり、フォームが送信されたときに特殊文字がエンコードされていると考えましたか?そして& GT;;。背後にあるコードで> javascriptを経由して、バック<にしてと

0

この方法では、 SQLインジェクションを排除する。私はあなたのフォームを使用する必要はありません、私は私のことを作ることができ、あなたのスクリプトにそれをPOSTします。さらに簡単に:私はJavaScriptを無効にして、データベースを削除することができます。

代わりに、サーバー側の入力の有効性を確認してください。

最も簡単な方法は、それをエスケープしたり、パラメータ化されたクエリを使用しています。

1

私はここで、この解決策を見つけた: http://www.devcurry.com/2009/10/allow-only-alphanumeric-characters-in.html

<script type="text/javascript"> 
$(function() { 
$('input.alpha').keyup(function() { 
    if (this.value.match(/[^a-zA-Z0-9 ]/g)) { 
    this.value = this.value.replace(/[^a-zA-Z0-9 ]/g, ''); 
    } 
}); 
}); 
</script> 

<input type="text" name="test" value="" class="alpha"> 
1

を私もペーストの問題への解決策を必要とし、私は私のために働く何かを考え出しました。ユーザーはブラウザのメニューで[編集]> [貼り付け]を使用できますが、右クリックペーストだけでなくCtrl-Vも処理されます。 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

それはうまくいくかもしれませんが、質問は "私はむしろ.blur()関数を使ってコードをさらに詳しく調べる必要はありません"と言っていました。だからポスターはこのようなアプローチの代替案を探していました。 – GargantuChet

関連する問題