入力フォームの英数字制限

[新着] Webテンプレートを仮オープンしました

0   名前： AK ： 2006/08/02（水） 10:38  ID:7JI80BzQ
初めまして、宜しくお願い致します。

フォームに郵便番号と電話番号の入力欄を設けております。
submitした際にチェックをするのではなく、入力する際に、半角数字とハイフンのみ許容するよう、
スクリプトで制限を掛けたいと思っております。

<pre>
function numberOnly() {
str = String.fromCharCode( event.keyCode );
if ( "0123456789\b\r\t".indexOf( str, 0 ) < 0 ) {
return false;
}
return true;
}
</pre>

サンプルで上記スクリプトを用意し、フォームでは
onkeydown="return numberOnly()"
で呼んでいます。

このような形で、半角数字とハイフンのみを許容するようなスクリプトにしたいのですが、
今のところ、全角文字も許容してしまい、ハイフンは入力不可となっております。

どなたか、ご教授頂けないでしょうか。宜しくお願い致します。













1   名前： かふぇおれ ： 2006/08/02（水） 10:38  ID:Ji0blfRq


余り詳しくない私が言うのも何ですが、正規表現で行けませんか？
<html>
<head>
<title>数値かどうか調べる</title>
<script type="text/javascript">
<!--
function check(){
str = document.F1.num.value;
data = str.match(/[^0-9\-]/g);
if (data) alert("半角数字以外の "+data+" が含まれています");
}
// -->
</script>
</head>
<body>
半角数字と-（ハイフォン）だけ入力可
<form name="F1">
<input type="text" name="num" onKeyDown="check()">
<input type="button" value="リセット" onClick="reset()">
</form>
</body>
</html>












2   名前： 牛若 ： 2006/08/02（水） 10:38  ID:.cJe2DMZ


>>0
そのコードをできるだけ活用するとすれば、こんな感じかな。
（untested）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>Untitled-Doc</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function check(){
    if(isValid(document.f1.number.value) == false){
        alert("有効な入力ではありません")
        return false;
    }
}

function isValid(num){
    var i,num2;
    var checkStr = new String('0123456789-');
    num2 = num.replace(/ /g,'');
    if(num2.length == 0){
        return false;
    }
    for(i=0;i<num2.length;i++){
        if(checkStr.indexOf(num2.charAt(i),0) == -1){
            return false;
        }
    }
    return true;
}
</script>
</head>
<body>
<form name="f1">
<input type="text" name="number">
<input type="button" value="Check" onClick="check()">
</form>
</body>
</html>  











3   名前： AK ： 2006/08/02（水） 10:38  ID:7JI80BzQ


かふぇおれ様、牛若様、返信ありがとうございます。

私の説明不足から、誤解を招いてしまいまして、申し訳ございません。
再度説明させて頂きます。

かふぇおれ様のコードですと、アラートは出るものの、英文字は入力可となりますよね。
それを、全く入力不可(=テキスト入力欄に、文字すら表示されない)にしたいのです。

牛若様のコードですと、submitした際のチェックになるので、できれば入力中に抑制したいと考えております。

現状考えているコードです。お試し頂くと分かると思いますが、数字のみ許容し、英文字の入力は
不可にしています。
これにハイフンも許容するようにしたいのですが、どうもうまく行きません。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
<!--
function numberOnly() {
    str = String.fromCharCode( event.keyCode );
    if ( "0123456789\b\r\t".indexOf( str, 0 ) < 0 ) {
        return false;
    }
    return true;
}
-->
</script>
</head>

<body>

<form>
<input type="text" name="number" onkeydown="return numberOnly()">
</form>

</body>
</html>



手助け頂けると幸いです。
また、できれば正規表現のような簡単な書き方で数字の許容もしたいのですが、
現状ですと上記のような書き方しか思いつきませんでした。
もし、英文字も許容するようになった場合に、AからZまで書くのを考えると、非常に煩雑になりますので、
代替案がありましたら、ご教授頂きたいと考えております。

宜しくお願い致します。











4   名前： Pid ： 2006/08/02（水） 10:38  ID:kvNAjtGb


IE 独自の window.event を使っていますが，大丈夫ですか。

・一般に，人間の意思決定は keydown 時ではなく keyup 時だとされています。

・keyup イベント時に，input[@name="number"] 要素の value 属性値の最後の文字（入力された文字）を見てゴニョゴニョすれば良いのでは。キーコードで制御するのは結構大変ですよ（もっとも，コピペされた時にどうするかという問題は残りますが）。

あと，変数は必ず var 宣言してから使って下さい。でないとグローバル変数になってしまいます。











5   名前： Pid ： 2006/08/02（水） 10:38  ID:kvNAjtGb


>>4
> 一般に，人間の意思決定は keydown 時ではなく keyup 時だとされています。

今回の場合では keydown 時にとっとと判定した方が良いですね。失礼しました。














一覧へ戻る