We are excited to announce that the ASP.NET Forums are moving to the new Microsoft Q&A experience. Learn more >

$(':focus') not supported in Chrome/Safari[Answered] RSS

3 replies

Last post Feb 21, 2020 03:01 PM by micnie2020

‹ Previous Thread|Next Thread ›

Shortcuts

- Reply
micnie2020
Member

126 Points

801 Posts

$(':focus') not supported in Chrome/Safari

Feb 20, 2020 02:00 AM|micnie2020|LINK

Hi All,

This function is working fine in IE but not in Chrome/safari ($(':focus')). Anyone have idea how to make this works?

This is when user fill in the text box & onchange; the field will auto replaced with below value:

Eg:

9 => 00:09

90 = > 00:90

900 => 09:00

9000 => 90:00

function validateTime(x) {

var txtVal = $(':focus')[0].value;

if ($(':focus')[0].value.length == 1) {

var result = "00:0" + txtVal;

$('input[name="' + document.activeElement.id + '"]').val(result);

}

if ($(':focus')[0].value.length == 2) {

var result = "00:" + txtVal;

$('input[name="' + document.activeElement.id + '"]').val(result);

}

if ($(':focus')[0].value.length == 4) {

var ed = txtVal.substring(2, 4);

var st = txtVal.substring(0, 2);

var result = st + ":" + ed;

$('input[name="' + document.activeElement.id + '"]').val(result);

}

if ($(':focus')[0].value.length == 3) {

var ed = txtVal % 100;

var st = "0"+(txtVal.charAt(0));

var result = st + ":" + ed;

$('input[name="' + document.activeElement.id + '"]').val(result);

}

if ($(':focus')[0].value.length == 5) {

var newreg = /^(([0-1][0-9])|(2[0-3])):[0-5][0-9]$/;

var first = $(':focus')[0].value.split(":")[0];

var second = $(':focus')[0].value.split(":")[1];

if (first > 24 || second > 59) {

alert("Invalid. The valid format is HH:MM");

$('input[name="' + document.activeElement.id + '"]').val("");

$('input[name="' + document.activeElement.id + '"]').focus();

}

else if (!newreg.test($(':focus')[0].value)) {

alert("Invalid. The valid format is HH:MM");

$('input[name="' + document.activeElement.id + '"]').val("");

$('input[name="' + document.activeElement.id + '"]').focus();

}

}

else if ($(':focus')[0].value != 0) {

alert("Invalid. The valid format is HH:MM");

$('input[name="' + document.activeElement.id + '"]').val("");

$('input[name="' + document.activeElement.id + '"]').focus();

}

return false;

}

Please advise.

Thanks.

Regards,

Micheale
- Reply
micnie2020
Member

126 Points

801 Posts

Re: $(':focus') not supported in Chrome/Safari

Feb 20, 2020 02:49 AM|micnie2020|LINK

Hi All,

I change to below solution, seems work for Chrome & IE. Expert, please give you comments & advise. Am I doing the right way?

param x => input is this

function validateTime(x) {

var i = $('input[name="' + x.id + '"]').length == 0 ?$('input[name="' + x.id + '"]').length: $('input[name="' + x.id + '"]').length - 1;

var txtVal = $('input[name="' + x.id + '"]').focus()[i].value;

if ($('input[name="' + x.id + '"]').focus()[i].value.length == 1) {

var result = "00:0" + txtVal;

$('input[name="' + x.id + '"]').val(result);

}

if ($('input[name="' + x.id + '"]').focus()[i].value.length == 2) {

var result = "00:" + txtVal;

$('input[name="' + x.id + '"]').val(result);

}

//debugger;

if ($('input[name="' + x.id + '"]').focus()[i].value.length == 4) {

var ed = txtVal.substring(2, 4);

var st = txtVal.substring(0, 2);

var result = st + ":" + ed;

$('input[name="' + x.id + '"]').val(result);

}

if ($('input[name="' + x.id + '"]').focus()[i].value.length == 3) {

var ed = txtVal % 100;

var st = "0"+(txtVal.charAt(0));

var result = st + ":" + ed;

//debugger;

$('input[name="' + x.id + '"]').val(result);

}

if ($('input[name="' + x.id + '"]').focus()[i].value.length == 5) {

//var newreg = /^[0-2][0-3]:[0-5][0-9]$/;

var newreg = /^(([0-1][0-9])|(2[0-3])):[0-5][0-9]$/;

var first = $('input[name="' + x.id + '"]').focus()[i].value.split(":")[0];

var second = $('input[name="' + x.id + '"]').focus()[i].value.split(":")[1];

if (first > 24 || second > 59) {

alert("Invalid. The valid format is HH:MM");

$('input[name="' + x.id + '"]').val("");

$('input[name="' + x.id + '"]').focus();

}

else if (!newreg.test($('input[name="' + x.id + '"]').focus()[i].value)) {

alert("Invalid. The valid format is HH:MM");

$('input[name="' + x.id + '"]').val("");

$('input[name="' + x.id + '"]').focus();

}

}

else if ($('input[name="' + x.id + '"]').focus()[i].value != 0) {

alert("Invalid. The valid format is HH:MM");

$('input[name="' + x.id + '"]').val("");

$('input[name="' + x.id + '"]').focus();

}

//debugger;

return false;

}

Many thanks.

Regards,

Micheale
- Reply
samwu
Contributor

3370 Points

1409 Posts

Re: $(':focus') not supported in Chrome/Safari

Feb 21, 2020 05:56 AM|samwu|LINK

Hi Micnie2020,

micnie2020
This function is working fine in IE but not in Chrome/safari ($(':focus')). Anyone have idea how to make this works?

micnie2020
I change to below solution, seems work for Chrome & IE. Expert, please give you comments & advise. Am I doing the right way?

According to your description, I cannot reproduce your problem, can you show me your html or aspx code?

And the :focus Selector is used to select all the elements that have focus on the document currently. It is also used with a tag name or using another selector.

But in your js, it seems didn't select the focused element.

Best regards,

Sam

IIS.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today. Learn more >

micnie2020

Member

126 Points

801 Posts

Re: $(':focus') not supported in Chrome/Safari

Feb 21, 2020 03:01 PM|micnie2020|LINK

Hi,

Here sample in simple testing.html. If I change to below code, works in all browser. But, not sure is this the right way to go:-

<!DOCTYPE html>
<html>
<head> 
<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
function validateTime(x) {   
            var i = $('input[name="' + x.id + '"]').length == 0 ? $('input[name="' + x.id + '"]').length : $('input[name="' + x.id + '"]').length - 1;
            var txtVal = $('input[name="' + x.id + '"]').focus()[i].value;
            if ($('input[name="' + x.id + '"]').focus()[i].value.length == 1) {
                var result = "00:0" + txtVal;
                $('input[name="' + x.id + '"]').val(result);
            }
            if ($('input[name="' + x.id + '"]').focus()[i].value.length == 2) {
                var result = "00:" + txtVal;
                $('input[name="' + x.id + '"]').val(result);
            }
            //debugger;
            if ($('input[name="' + x.id + '"]').focus()[i].value.length == 4) {
                var ed = txtVal.substring(2, 4);
                var st = txtVal.substring(0, 2);
                var result = st + ":" + ed;
               

                $('input[name="' + x.id + '"]').val(result);
            }
            if ($('input[name="' + x.id + '"]').focus()[i].value.length == 3) {
                var ed = txtVal % 100;
                var st = "0"+(txtVal.charAt(0));
                var result = st + ":" + ed;
                //debugger;
                $('input[name="' + x.id + '"]').val(result);
            }               
           

            if ($('input[name="' + x.id + '"]').focus()[i].value.length == 5) {
                //var newreg = /^[0-2][0-3]:[0-5][0-9]$/;
                var newreg = /^(([0-1][0-9])|(2[0-3])):[0-5][0-9]$/;

                var first = $('input[name="' + x.id + '"]').focus()[i].value.split(":")[0];
                var second = $('input[name="' + x.id + '"]').focus()[i].value.split(":")[1];

                if (first > 24 || second > 59) {
                    alert("Invalid. The valid format is HH:MM");
                    $('input[name="' + x.id + '"]').val("");
                    $('input[name="' + x.id + '"]').focus();
                }

                else if (!newreg.test($('input[name="' + x.id + '"]').focus()[i].value)) {
                    alert("Invalid. The valid format is HH:MM");
                    $('input[name="' + x.id + '"]').val("");
                    $('input[name="' + x.id + '"]').focus();
                }

            }
            else if ($('input[name="' + x.id + '"]').focus()[i].value != 0) {
                alert("Invalid. The valid format is HH:MM");
                $('input[name="' + x.id + '"]').val("");
                $('input[name="' + x.id + '"]').focus();
            }
           
            return false;
        }
</script>
</head>
<body>
<form>
<input type="text" id="Start" name="Start" placeholder="HH:MM" class="timeformat2" MaxLength="5" autofocus="true" onchange="validateTime(this);"  />
</form>
</body>
</html>

If I am using this, only work in IE not others browser:-

<!DOCTYPE html>
<html>
<head> 
<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
function validateTime(x) { 


var txtVal = $(':focus')[0].value;

if ($(':focus')[0].value.length== 1) {

var result = "00:0" + txtVal;

$('input[name="' + document.activeElement.id + '"]').val(result);

}

if ($(':focus')[0].value.length== 2) {

var result = "00:" + txtVal;

$('input[name="' + document.activeElement.id + '"]').val(result);

}

if ($(':focus')[0].value.length== 4) {

var ed = txtVal.substring(2, 4);

var st = txtVal.substring(0, 2);

var result = st + ":" + ed;


$('input[name="' + document.activeElement.id + '"]').val(result);

}

if ($(':focus')[0].value.length== 3) {

var ed = txtVal % 100;

var st = "0"+(txtVal.charAt(0));

var result = st + ":" + ed;

$('input[name="' + document.activeElement.id + '"]').val(result);

}


if ($(':focus')[0].value.length== 5) {

var newreg = /^(([0-1][0-9])|(2[0-3])):[0-5][0-9]$/;

var first = $(':focus')[0].value.split(":")[0];

var second = $(':focus')[0].value.split(":")[1];

if (first > 24 || second > 59) {

alert("Invalid. The valid format is HH:MM");

$('input[name="' + document.activeElement.id + '"]').val("");

$('input[name="' + document.activeElement.id + '"]').focus();

}

else if (!newreg.test($(':focus')[0].value)) {

alert("Invalid. The valid format is HH:MM");

$('input[name="' + document.activeElement.id + '"]').val("");

$('input[name="' + document.activeElement.id + '"]').focus();

}

}

else if ($(':focus')[0].value != 0) {

alert("Invalid. The valid format is HH:MM");

$('input[name="' + document.activeElement.id + '"]').val("");

$('input[name="' + document.activeElement.id + '"]').focus();

}

return false;

}


function validateTime2(x) {   
            var i = $('input[name="' + x.id + '"]').length == 0 ? $('input[name="' + x.id + '"]').length : $('input[name="' + x.id + '"]').length - 1;
            var txtVal = $('input[name="' + x.id + '"]').focus()[i].value;
            if ($('input[name="' + x.id + '"]').focus()[i].value.length == 1) {
                var result = "00:0" + txtVal;
                $('input[name="' + x.id + '"]').val(result);
            }
            if ($('input[name="' + x.id + '"]').focus()[i].value.length == 2) {
                var result = "00:" + txtVal;
                $('input[name="' + x.id + '"]').val(result);
            }
            //debugger;
            if ($('input[name="' + x.id + '"]').focus()[i].value.length == 4) {
                var ed = txtVal.substring(2, 4);
                var st = txtVal.substring(0, 2);
                var result = st + ":" + ed;
                

                $('input[name="' + x.id + '"]').val(result);
            }
            if ($('input[name="' + x.id + '"]').focus()[i].value.length == 3) {
                var ed = txtVal % 100;
                var st = "0"+(txtVal.charAt(0));
                var result = st + ":" + ed;
                //debugger;
                $('input[name="' + x.id + '"]').val(result);
            }               
            

            if ($('input[name="' + x.id + '"]').focus()[i].value.length == 5) {
                //var newreg = /^[0-2][0-3]:[0-5][0-9]$/;
                var newreg = /^(([0-1][0-9])|(2[0-3])):[0-5][0-9]$/;

                var first = $('input[name="' + x.id + '"]').focus()[i].value.split(":")[0];
                var second = $('input[name="' + x.id + '"]').focus()[i].value.split(":")[1];

                if (first > 24 || second > 59) {
                    alert("Invalid. The valid format is HH:MM");
                    $('input[name="' + x.id + '"]').val("");
                    $('input[name="' + x.id + '"]').focus();
                }

                else if (!newreg.test($('input[name="' + x.id + '"]').focus()[i].value)) {
                    alert("Invalid. The valid format is HH:MM");
                    $('input[name="' + x.id + '"]').val("");
                    $('input[name="' + x.id + '"]').focus();
                }

            }
            else if ($('input[name="' + x.id + '"]').focus()[i].value != 0) {
                alert("Invalid. The valid format is HH:MM");
                $('input[name="' + x.id + '"]').val("");
                $('input[name="' + x.id + '"]').focus();
            }
           
            return false;
        }
</script>
</head>
<body>
<form>
<input type="text" id="Start" name="Start" placeholder="HH:MM" class="timeformat2" MaxLength="5" autofocus="true" onchange="validateTime(this);"  />
</form>
</body>
</html>

Thanks.

Regards,

Micheale

‹ Previous Thread|Next Thread ›