2017-05-16 15 views
-1

私はかなりJavaScriptに新しいので、私はそれを取得していない場合は私と一緒に裸をしてください。ユーザーが特定の文字を入力しないようにしますか?

「+」、「 - 」、「*」、「/」などの記号は使用できません。 0を最初の数字にすることもできません。私が入力フィールドを作成し、その型を "数値"に設定しても、少なくとも "+"と " - "を書くことは許されています。ユーザーが最初の数字として0を書くのを防ぐことはできません。 。

$('input#update-private-ext').on('keydown', function (e) { 
    var value = String.fromCharCode(e.keyCode); 
    if ($(this).text.length == 0 && value == 0) { 
     return false; 
    } 
}); 

上記は最初の文字として0を禁止するという私の最初の試みでしたが、うまくいかないようです。最初の文字として0を書くことができます。私は私の分野でを書くことができない、

$('input#update-private-ext').on('keydown', function (e) { 
    var badChars = '+-/*'; 
    var value = String.fromCharCode(e.keyCode); 
    if ($(this).text.length == 0 && value == 0) { 
     return false; 
    } 
    if (badChars.indexOf(value) == -1) { 
     return false; 
    } 
}); 

をしかしbadCharsに確認してください:私も現れてからサインを停止するには、これを試してみました。では、私はここで何が欠けていますか?

+0

なぜ私がダウン投票になったのか聞きたいです。 – OmniOwl

答えて

1

e.keyを押すと、現在のキーが押されます。 String.fromCharCode(e.keyCode)が間違った結果を返します。

また、無効な文字がではないことを確認してください。-1です。そうであれば、あなたの文字はではなく、であるので、あなたはではないを入力する必要があります。

入力フィールドの長さを取得する場合は、ではなく、.val()を使用する必要があります。または、this.value.lengthを使用してjQueryを使わずに簡単に実行できます。 badChars.indexOf(v) >= 0あれば悪い文字のため
1.チェックイン:

$('input#update-private-ext').on('keydown', function (e) { 
 
     var badChars = '+-/*'; 
 
     var value = e.key; 
 
     if (this.value.length == 0 && value == '0') { 
 
      return false; 
 
     } 
 

 
     if (badChars.indexOf(value) !== -1) { 
 
      return false; 
 
     } 
 
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="update-private-ext">

+0

私はまだ最初の文字として0を書くことができます。それをどうやって回避するのですか? – OmniOwl

+0

あなたの編集により完全に機能しました。ありがとうございました!私はe.keyがより簡単な解決策であることを知っています:) – OmniOwl

+1

IEのe.keyに注意すると、IEとChromeで異なる結果が得られます。私はそれが異なる結果を与える矢印キーのためだと思います – shaunak1111

0

あなたは以下のような何かを行うことができます。
2.入力が0から始まるかどうかをチェックして0から開始することを禁止し、はいの場合は入力フィールドを空白に設定します。

これはあなたにスタートを与えることができます!

$('input#update-private-ext').on('keydown', function(e) { 
 
    var badChars = '+-/*'; 
 
    var v = e.key; 
 
    if (badChars.indexOf(v) >= 0) { 
 
    return false; 
 
    } 
 
    if ($(this).val().startsWith('0')) { 
 
    $(this).val(""); 
 
    return false; 
 
    } 
 

 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="update-private-ext" />

1

あなたは番号が48 to 57から文字コードを使用して数値と文字列を比較することにより、符号化されていることを忘れてはならない数値と文字列を比較すると、多くの暗黙の強制型変換があるとして、JavaScriptでエラーが発生しやすいです。混乱を避けるために、同じタイプのオブジェクトを比較する必要があります。

あなたのケースでは、比較は'0'に等しいString.fromCharCodeから文字列を解析された方法で行われるべき - ゼロ文字(文字列)、ない番号として0。

また、構文解析時にShiftキーや他のメタキーが押されたかどうかを手動で考慮する必要があるため、記号に奇妙な値が生じるという問題もあります(keyCode)。問題を解決して、e.keyを使用して解析されたキー値を取得してください。

ところで、this and $(this)の違いをご覧ください。基本的には、入力フィールドの実際のインスタンスがJQueryイテレータの最初の要素($(this)[0])であることを意味します。 thisを使用すると、イベントハンドラ内のターゲット要素に自動的に設定されます。

プリントアウトデバッグ情報を最初に0をブロックする次の例を参照してください。

$('input#update-private-ext').on('keydown', function (e) { 
 
    var value = e.key; 
 
    
 
    console.log('Typed character:'); 
 
    console.log(value); 
 
    
 
    console.log('$(this)'); 
 
    console.log($(this)); 
 
    
 
    console.log('this (input element):'); 
 
    console.log(this); 
 
    
 
    console.log("input's value:"); 
 
    console.log(this.value); 
 
    
 
    if (this.value.length == 0 && value == '0') { 
 
     console.log('blocked');  
 
     return false; 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="update-private-ext" />

あなただけの彼らに次のようにフィルタをかけることができ、他の文字を遮断するために(ということを覚えているのindexOfインデックスが見つからない場合は-1を返します)。

$('input#update-private-ext').on('keydown', function (e) { 
 
    var badChars = '+-/*'; 
 
    var value = e.key; 
 
    if (this.value.length == 0 && value == '0') { 
 
     return false; 
 
    } 
 
    //Please note NOT EQUALS TO -1 which means not found. 
 
    if (badChars.indexOf(value) !== -1) { 
 
     return false; 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="update-private-ext" />

関連する問題