WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:入力文字の制限について。

0:[投稿] たかみか [2002/02/19 19:38 ][環境:MAC+IE 不明]

はじめまして。お尋ねします。

JavaScriptを使って、<input type="password">、
或いは<input type="text">の入力条件を4桁の数字のみとしたいのです。

下記の方法では、入力すらできませんでした。
『c = String.fromCharCode(event.keyCode);
if ("0123456789".indexOf(c,0) < 0) alert("数値以外入力できません");
<input type="text" onKeyDown="checkNum()">』

どなたか、ご指導お願いします。


1:[回答] のぐりん [MAIL] [2002/02/19 19:56 ]

まず、基本的なところから間違えてるような気がします。
すでに、こうなってたらごめんなさい。

<Script Language="JavaScript">
<!--
function checkNum(){
var c;
c = String.fromCharCode(event.keyCode);
if ("0123456789".indexOf(c,0) < 0) alert("数値以外入力できません");
}
-->
</Script>
<input type="text" onKeyDown="checkNum()">


2:[回答] たかみか [2002/02/20 09:07 ]

のぐりんサンすみません。
私の質問の仕方が悪かったです。

はい、のぐりんサンが上記にお書きのように、あるメールフォームに書いたのですが、全角文字だけでなく、数字を入力しようとすると(どこかのキーを押した時点で)アラートが出てしまい、入力できないのです。

テンキーやブラウザーの関係があるのでしょうか...?


3:[質問] たかみか [2002/02/20 09:12 ]

さらに追加で質問ですが『0000以外は』という条件までつけることはできますか?


4:[回答] のぐりん [MAIL] [2002/02/20 10:18 ]

こんなのどうでしょう?
動作は確認してませんので、あくまでもヒントとして。

<Script Language="JavaScript">
<!--
function checkNum(){
var i;
var argstr=text1.value
if (argstr.length > 4){
   alert("4文字以上入力できません");
   break;
}
else if (argstr=="0000"){
   alert("数値以外入力できません");
   break;
}
for(i=0; i < argstr.length; i++){
  else if ("0123456789".indexOf(argstr.charAt(i) ,0) < 0){ alert("数値以外 入力できません");
   }
}
}
-->
</Script>
<input type="text" name="text1" onChange="checkNum()">


5:[回答] 正規表現大好き [2002/02/20 13:07 ]

へぼへぼスクリプト ですが、こんなんどうしょう?

DOM を実装している UA では、
条件が満足していないと ボタンを disabled にして押せなくします。

DOM を実装していない UA では、
ボタンをアクティブにしたときに、
条件が満足しているかどうか判別してアラートを出します。

動作確認
   Internet Explorer 6.0
   Netscape 4.7
   Netscape 6.2
   Mozilla 0.9.7
   Opera 6.0

<head>
<script type="text/javascript">
var GetId = document.getElementById;
function checkNum(f) {
    if (GetId) { // DOM が使える UA用
        var str = document.getElementById("input").value
        var btn = document.getElementById("btn");
        if (f == "load") btn.disabled = true;
        else if (f == "submit") alert("条件が満足しました。");
        else if (/[0-9]{4}/.test(str) && !/0{4}/.test(str)
            && str.length == 4) btn.disabled = false;
        else btn.disabled = true;
    } else { // DOM が使えない UA用
        var str = document.checkNumForm.input.value;
        if (!/[0-9]{4}/.test(str) || /0{4}/.test(str) || str.length != 4)
            alert("条件が満足していません。\n0000 以外の、4桁の数字を入力してください。");
        else alert("条件が満足しました。");
    }
}
</script>
</head>

<body>

<form action="./" name="checkNumForm" id="checkNumForm">
 <input type="text" value="" size="5" maxlength="4" name="input" id="input"
 onkeyup="if (GetId) checkNum();" onmouseup="if (GetId) checkNum();">
 <input type="button" value="submit" name="btn" id="btn"
 onclick="checkNum('submit')" onkeypress="checkNum('submit')">
</form><script type="text/javascript">if (GetId) checkNum("load")</script>

</body>


6:[質問] たかみか [2002/02/20 15:22 ]

お二方とも、ご丁寧にありがとうございます。
しかしまだまだ、穴から抜ける事ができません...。

のぐりんサマのヒントをモトに作成してみたのですが、
アラートが出ません。
ファンクションが通っていない?!

<script language="JavaScript">
function checkNum() {
    var i;
    var argstr=text1.value
      
    if (argstr.length > 4) {   
        alert("4文字以上入力できません");
        retern(0);
    } else if (argstr=="0000") {
        alert("数値以外入力できません");
        retern(0);
    }
    
    for(i=0; i < argstr.length; i++) {
        if ("0123456789".indexOf(argstr.charAt(i) ,0) < 0)
        {
            alert("数値以外入力できません");
        }
    }
}
</script>
</head>
<body>
<form>
<input name="text1" onChange="checkNum()">
</form>


正規表現大好きサマのスクリプト。
js見習いの私にはちょいと難しそうですが、今から頑張ってみます!!


7:[回答] のぐりん [MAIL] [2002/02/20 17:45 ]

これで、うまくいきますでしょうか?

<input name="text1" onChange="javascript:checkNum();">


8:[完了] たかみか [2002/02/21 09:14 ]

色々お世話になりました。
のぐりんサマ、正規表現大好きサマのスクリプトサマ、さらに友人の協力により完成いたしました。

<script type="text/javascript">
function checkNum() {
    var i;
    var argstr=document.getElementById("num").value
    if (argstr.length > 4) {
        alert("4文字以上入力できません");
        return(0);
    } else if (argstr=="0000") {
        alert("0000以外で入力して下さい");
        return(0);
    }
    
    for(i=0; i < argstr.length; i++) {
        if ("0123456789".indexOf(argstr.charAt(i) ,0) < 0)
        {
            alert("数値以外入力できません");
        }
    }
}</script>
</head>
<body>
<form name="ckNumform" id="ckNumform">
<input type="text" name="num" value="" id="num" maxlength=4 onkeyup="checkNum();">
</form>

皆様に多大な感謝を込めて。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World