どんなブロックの使用を制限する特殊文字の入力から分野jquery?
-
23-08-2019 - |
質問
どんなブロック特殊文字から入力されている入力フjquery?
正しい解決策はありません
他のヒント
あなたが好きな禁止/許可するように変更される可能性があり、正規表現を使用して簡単な例を。
$('input').on('keypress', function (event) {
var regex = new RegExp("^[a-zA-Z0-9]+$");
var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
if (!regex.test(key)) {
event.preventDefault();
return false;
}
});
私は英数字のみへの入力を制限答えを探しているが、依然として制御文字(例えば、バックスペース、削除、タブ)コピー+ペーストの使用を許可されました。私はこれらの要件のすべてを満足しようとしたの回答のどれも、私はinput
イベントを使用して、次のを思い付いたんます。
$('input').on('input', function() {
$(this).val($(this).val().replace(/[^a-z0-9]/gi, ''));
});
の編集を
rinogoとして、 のコメントで指摘入力テキストの途中で入力するとき、上記のコードは、入力の終わりにカーソルを強制します。私は以下のコードは、この問題を解決信じています。
$('input').on('input', function() {
var c = this.selectionStart,
r = /[^a-z0-9]/gi,
v = $(this).val();
if(r.test(v)) {
$(this).val(v.replace(r, ''));
c--;
}
this.setSelectionRange(c, c);
});
答え: 防止の打鍵のイベント:
$("input").keypress(function(e){
var charCode = !e.charCode ? e.which : e.charCode;
if(/* Test for special character */ )
e.preventDefault();
})
長い回答: 使用プラグインのように jquery.alphanum
いつも考慮すべきポイントについてはキ液
- テキストを貼り付け
- 制御文字のようにbackspaceはF5を防止することができ、上記のコードです。
- é,í,nなど
- アラビア語や中国---
- クロスブラウザの互換性
この領域が複雑なものに十分な保証を第3者の引き出しおよび設定ができます試複数のプラグインが見つかの問題がそれぞれその先に書いた jquery.alphanum.次のようなコードになります:
$("input").alphanum();
ご利用いただけます。に対するきめ細かい制御を追加-一部の設定:
$("#username").alphanum({
allow : "€$£",
disallow : "xyz",
allowUpper : false
});
希望です。
HTML5のパターン入力属性を使用してください!
<input type="text" pattern="^[a-zA-Z0-9]+$" />
jQueryの英数字のプラグインを見てみましょう。 https://github.com/KevinSheedy/jquery.alphanumする
//All of these are from their demo page
//only numbers and alpha characters
$('.sample1').alphanumeric();
//only numeric
$('.sample4').numeric();
//only numeric and the .
$('.sample5').numeric({allow:"."});
//all alphanumeric except the . 1 and a
$('.sample6').alphanumeric({ichars:'.1a'});
何を禁止/許可するように正規表現を使用してください。また、受け入れ答えよりも少しより堅牢なバージョンのために、(など、バックスペース、タブ、矢印キー、削除)それに関連付けられたキーの値を持っていない可能文字は、最初のキープレスイベントを通過させることによって行うことができ、キーコードの代わりの値に基づいてキーを確認します。
$('#input').bind('keydown', function (event) {
switch (event.keyCode) {
case 8: // Backspace
case 9: // Tab
case 13: // Enter
case 37: // Left
case 38: // Up
case 39: // Right
case 40: // Down
break;
default:
var regex = new RegExp("^[a-zA-Z0-9.,/ $@()]+$");
var key = event.key;
if (!regex.test(key)) {
event.preventDefault();
return false;
}
break;
}
});
あなたのテキストボックス:
<input type="text" id="name">
あなたのjavascriptます:
$("#name").keypress(function(event) {
var character = String.fromCharCode(event.keyCode);
return isValid(character);
});
function isValid(str) {
return !/[~`!@#$%\^&*()+=\-\[\]\\';,/{}|\\":<>\?]/g.test(str);
}
テキストボックスのOnKeyPressイベントにいくつかのJavaScriptコードを記述します。 要件ごとにすることが可能とあなたのテキストボックスに文字を制限する
function isNumberKeyWithStar(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode != 42)
return false;
return true;
}
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
function isNumberKeyForAmount(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode != 46)
return false;
return true;
}
私は私が見た他の人を変更するこのコードを使用します。キーが押され又は貼り付けたテキストは、パターンテスト(一致)を通る場合、ユーザー書き込みにのみグランド
(この例では、8桁可能テキスト入力です。)$("input").on("keypress paste", function(e){
var c = this.selectionStart, v = $(this).val();
if (e.type == "keypress")
var key = String.fromCharCode(!e.charCode ? e.which : e.charCode)
else
var key = e.originalEvent.clipboardData.getData('Text')
var val = v.substr(0, c) + key + v.substr(c, v.length)
if (!val.match(/\d{0,8}/) || val.match(/\d{0,8}/).toString() != val) {
e.preventDefault()
return false
}
})
これは、文字「A」を入力してからユーザーを防ぐ例です。
$(function() {
$('input:text').keydown(function(e) {
if(e.keyCode==65)
return false;
});
});
refrenceここで ありができなjQueryを使うことによって、ど:
<script>
$(document).ready(function()
{
$("#username").blur(function()
{
//remove all the class add the messagebox classes and start fading
$("#msgbox").removeClass().addClass('messagebox').text('Checking...').fadeIn("slow");
//check the username exists or not from ajax
$.post("user_availability.php",{ user_name:$(this).val() } ,function(data)
{
if(data=='empty') // if username is empty
{
$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('Empty user id is not allowed').addClass('messageboxerror').fadeTo(900,1);
});
}
else if(data=='invalid') // if special characters used in username
{
$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('Sorry, only letters (a-z), numbers (0-9), and periods (.) are allowed.').addClass('messageboxerror').fadeTo(900,1);
});
}
else if(data=='no') // if username not avaiable
{
$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('User id already exists').addClass('messageboxerror').fadeTo(900,1);
});
}
else
{
$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('User id available to register').addClass('messageboxok').fadeTo(900,1);
});
}
});
});
});
</script>
<input type="text" id="username" name="username"/><span id="msgbox" style="display:none"></span>
スライドバーをご user_availability.php ます:
<?php
include'includes/config.php';
//value got from the get method
$user_name = trim($_POST['user_name']);
if($user_name == ''){
echo "empty";
}elseif(preg_match('/[\'^£$%&*()}{@#~?><>,|=_+¬-]/', $user_name)){
echo "invalid";
}else{
$select = mysql_query("SELECT user_id FROM staff");
$i=0;
//this varible contains the array of existing users
while($fetch = mysql_fetch_array($select)){
$existing_users[$i] = $fetch['user_id'];
$i++;
}
//checking weather user exists or not in $existing_users array
if (in_array($user_name, $existing_users))
{
//user name is not availble
echo "no";
}
else
{
//user name is available
echo "yes";
}
}
?>
ための追加のために / や \ がないことに成功した。
することができまを使用することによりjavascript&コード:
<!-- Check special characters in username start -->
<script language="javascript" type="text/javascript">
function check(e) {
var keynum
var keychar
var numcheck
// For Internet Explorer
if (window.event) {
keynum = e.keyCode;
}
// For Netscape/Firefox/Opera
else if (e.which) {
keynum = e.which;
}
keychar = String.fromCharCode(keynum);
//List of special characters you want to restrict
if (keychar == "'" || keychar == "`" || keychar =="!" || keychar =="@" || keychar =="#" || keychar =="$" || keychar =="%" || keychar =="^" || keychar =="&" || keychar =="*" || keychar =="(" || keychar ==")" || keychar =="-" || keychar =="_" || keychar =="+" || keychar =="=" || keychar =="/" || keychar =="~" || keychar =="<" || keychar ==">" || keychar =="," || keychar ==";" || keychar ==":" || keychar =="|" || keychar =="?" || keychar =="{" || keychar =="}" || keychar =="[" || keychar =="]" || keychar =="¬" || keychar =="£" || keychar =='"' || keychar =="\\") {
return false;
} else {
return true;
}
}
</script>
<!-- Check special characters in username end -->
<!-- in your form -->
User id : <input type="text" id="txtname" name="txtname" onkeypress="return check(event)"/>
数字だけます:
$( 'input.time')のKeyDown(関数(E){IF(e.keyCode> = 48 && e.keyCode <= 57){ trueを返します。 }他{ falseを返します。 }});
や時間などの ":"
$( 'input.time')のKeyDown(関数(E){IF(e.keyCode> = 48 && e.keyCode <= 58){ trueを返します。 }他{ falseを返します。 }});
も削除してバックスペースを含めます:
$( 'input.time')のKeyDown(関数(E){IF((e.keyCode> = 46 && e.keyCode <= 58)|| e.keyCode == 8){trueを返します。 }他{ falseを返します。 }});
unfortuneatlyそれはiMacの上で動作するようになっていない。
デールの答えにアレックスのコメントにコメントしたかったです。ことはできません(最初の文句を言わない。..奇妙なシステムは非常にすぐに起こること?どのくらいの「担当者」が必要です。) だから、答えとして:
[-ZA-Z0-9 \のB]:バックスペースは、このような正規表現の定義に\ bを追加することによって追加することができます。 それとも、単に「非エキゾチック」の文字が(また、バックスペースなどの文字を制御)より以下のものを含め、全体のラテン語の範囲を許可:^ [\ u0000- \ u024F \ u20AC] + $
ラテン外の唯一の本当のUnicode文字を使用すると、他の必要があるかもしれないものは何でもユーロ記号(20AC)、追加があります。
..それを削除するか、またはそれをストライピング/「サポートされていない文字」のようなエラーメッセージを与える -また、単にも「変更」イベントに結合し、あまりにもそこに入力をチェックし、コピー&ペーストを介して入力された入力を処理するには
if (!regex.test($j(this).val())) {
alert('your input contained not supported characters');
$j(this).val('');
return false;
}
キープレスの特別文字を制限します。ここでキーコードのためのテストページがあります: http://www.asquare.net/javascript/tests /KeyCode.htmlする
var specialChars = [62,33,36,64,35,37,94,38,42,40,41];
some_element.bind("keypress", function(event) {
// prevent if in array
if($.inArray(event.which,specialChars) != -1) {
event.preventDefault();
}
});
角度で、私は私のテキストフィールドで適切な通貨フォーマットを必要としていました。私の解決策ます:
var angularApp = angular.module('Application', []);
...
// new angular directive
angularApp.directive('onlyNum', function() {
return function( scope, element, attrs) {
var specialChars = [62,33,36,64,35,37,94,38,42,40,41];
// prevent these special characters
element.bind("keypress", function(event) {
if($.inArray(event.which,specialChars) != -1) {
prevent( scope, event, attrs)
}
});
var allowableKeys = [8,9,37,39,46,48,49,50,51,52,53,54,55,56
,57,96,97,98,99,100,101,102,103,104,105,110,190];
element.bind("keydown", function(event) {
if($.inArray(event.which,allowableKeys) == -1) {
prevent( scope, event, attrs)
}
});
};
})
// scope.$apply makes angular aware of your changes
function prevent( scope, event, attrs) {
scope.$apply(function(){
scope.$eval(attrs.onlyNum);
event.preventDefault();
});
event.preventDefault();
}
HTMLでディレクティブを追加します。
<input only-num type="text" maxlength="10" id="amount" placeholder="$XXXX.XX"
autocomplete="off" ng-model="vm.amount" ng-change="vm.updateRequest()">
と対応する角度コントローラに私は、1つだけの期間であること番号にテキストを変換して「ブラー」
に丸め番号を追加することが可能...
this.updateRequest = function() {
amount = $scope.amount;
if (amount != undefined) {
document.getElementById('spcf').onkeypress = function (e) {
// only allow one period in currency
if (e.keyCode === 46 && this.value.split('.').length === 2) {
return false;
}
}
// Remove "." When Last Character and round the number on blur
$("#amount").on("blur", function() {
if (this.value.charAt(this.value.length-1) == ".") {
this.value.replace(".","");
$("#amount").val(this.value);
}
var num = parseFloat(this.value);
// check for 'NaN' if its safe continue
if (!isNaN(num)) {
var num = (Math.round(parseFloat(this.value) * 100) / 100).toFixed(2);
$("#amount").val(num);
}
});
this.data.amountRequested = Math.round(parseFloat(amount) * 100) / 100;
}
...
特殊文字、スペースを交換し、小文字に変換するには、
$(document).ready(function (){
$(document).on("keyup", "#Id", function () {
$("#Id").val($("#Id").val().replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '').toLowerCase());
});
});
[User below code to restrict special character also
$(h.txtAmount).keydown(function (event) {
if (event.shiftKey) {
event.preventDefault();
}
if (event.keyCode == 46 || event.keyCode == 8) {
}
else {
if (event.keyCode < 95) {
if (event.keyCode < 48 || event.keyCode > 57) {
event.preventDefault();
}
}
else {
if (event.keyCode < 96 || event.keyCode > 105) {
event.preventDefault();
}
}
}
});]
$(function(){
$('input').keyup(function(){
var input_val = $(this).val();
var inputRGEX = /^[a-zA-Z0-9]*$/;
var inputResult = inputRGEX.test(input_val);
if(!(inputResult))
{
this.value = this.value.replace(/[^a-z0-9\s]/gi, '');
}
});
});