javascriptは、chromeとfirefoxで異なった動作をしている場合、テキストボックスに重点を置きます。

Question

私はテキストボックスを検証していますが、検証に失敗した場合はフォーカスが同じテキストボックスになければなりません。 インターネットで検索しましたが、適切な答えが見つかりませんでした。

firefoxで私のASPページを開くと、警告メッセージが閉じられた後、別のコントロールにフォーカスが移ります。警告メッセージを閉じることができず、警告ウィンドウの[OK]ボタンまたは閉じるボタンをクリックするたびに再表示されます。

<div class="form-group"> 
          <label for="inputAge" class="col-md-2 control-label" id="lblAge">Age</label> 
          <div class="col-md-9"> 
           <input type="text" id="inputAge" placeholder="35 or 25D or 5M" runat="server" required="required" maxlength="3" onblur="return ValidateAge()" /> 
          </div> 
         </div> 

<script type="text/javascript"> 
     function ValidateAge() { 
      var str = document.getElementById("inputAge").value; 
      var number_regex = /^[1-9]\d*$/; 

      if (str.slice(-1) === 'm') { 
       var number_part = str.slice(0, -1); 

       if (!number_regex.test(number_part)) { 
        alert("invalid age1"); 
        document.getElementById("inputAge").focus(); 
        return false; 
       } 
       else if (number_part > 12) { 
        alert("invalid age2"); 
        document.getElementById("inputAge").focus(); 
        return false; 
       } 
       else { 
        return true; 
       } 
      } 
     } 
    </script> 

検証が失敗した場合、同じテキストボックスにフォーカスを設定するにはどうすればよいですか？

Answer 1

この問題は別のblurイベントを引き起こすdocument.getElementById("inputAge").focus() javascript文に依存します。したがって、この副作用のためValidateAge()の実行を避けるのに役立つような種類のstateハンドリングを実装する必要があります。

は、同様にこの実装を試してみてください：

 var cancelBlurEvent = false; 
     function ValidateAge() { 

      if(cancelBlurEvent === true){ 
       return cancelBlurEvent = false; 
      } 

      var str = document.getElementById("inputAge").value; 
      var number_regex = /^[1-9]\d*$/; 
      if (str.slice(-1) === 'm') { 
       var number_part = str.slice(0, -1); 

       if (!number_regex.test(number_part)) { 
        alert("invalid age1"); 
        cancelBlurEvent = true //it is important to change cancelBlurEvent value before next statement 
        document.getElementById("inputAge").focus(); 
        return cancelBlurEvent; 
       } 
       else if (number_part > 12) { 
        alert("invalid age2"); 
        cancelBlurEvent = true 
        document.getElementById("inputAge").focus(); 
        return cancelBlurEvent; 
       } 
       else { 
        return cancelBlurEvent = false; 
       } 
      } 
     }