1

ネセテッドイベントを作りたい。ネストされたイベントとは、次のようなことを意味します。

HTML:

<input type="text" onFocus='validStartDate()' name="start_date" id="startDate" />

Javascript:

function checkCorrectStart()
{
    document.getElementById("startDate").className = "focus";
    document.getElementById("startDate").onChange = function(){
        validStartDate();   
    };
}

function validStartDate()
{
   re = /^\d{4}\-\d{2}\-\d{2}$/;
   var aux = document.getElementById("startDate").value;
   var valid = false;

   if (aux.match(re))
   {
       document.getElementById("startDate").className = "correct";
       valid = true;
   }
   else
   {
       document.getElementById("startDate").className = "wrong";
   }
   return valid;
}

アイデアは、ユーザーが入力ボックスにフォーカスすると、入力の周りに黄色の影ができるというものです。次に、ユーザーがその入力ボックスの内容を変更すると、それが正しいかどうかを確認し、正しい場合は緑色の影を、赤色の場合は緑色の影を作ります。正しくない場合はシャドーします。

これを行う方法に関するアイデアやその他の提案は、大歓迎です。

4

1 に答える 1

0

jQuery（プレーンなJavaScriptを使用して）使用したくない場合は、これを試すことができます

window.onload=function(){
    var el=document.getElementById("startDate");
    el.onfocus=function(){
        var currentClass=el.parentNode.className;
        if(currentClass!='correct') el.parentNode.className = "wrong";
    }
    el.onchange = validStartDate;   
    el.onkeyup = validStartDate;   
}

function validStartDate()
{
   var el=document.getElementById("startDate");
   var re = /^\d{4}\-\d{2}\-\d{2}$/;
   var aux = el.value;
   var valid = false;

   if (aux.match(re))
   {
       el.parentNode.className = "correct";
       valid = true;
   }
   else
   {
       el.parentNode.className = "wrong";
       valid = false;
   }
   return valid;
}

ここには含めませんでしcssた。デモで利用できますが、ページで使用する必要があります。

デモ。

于 2012-08-29T11:46:17.073 に答える