CODEWITHSUNDEEP
javascriptgoogle-chrome
Darrel Holt
Darrel Holt

Reputation: 910

Latest version of Chrome disabled textfield input

Just about everyone at my company is having with last week's Chrome release build 75.0.3770.142. There is a specific text field in a homegrown Java EE application that no longer takes input. Previous versions still work successfully, such as build 74.0.3729.169. I've been looking through the onkeypress function call and it looks like the culprit is window.event.returnValue. Does anyone have more information? Is it deprecated or disabled? I was looking through the build logs and didn't see anything mentioned.

The following code is what it's running. It's used in the search process. I did not write it, it was written 14 years ago and the creator isn't with the company anymore. It's supposed to ensure that the user is on chrome and that their input is valid. I.e.: begins with an alphabetical character, no more than 4 chars long, and allows an asterisk to get all results:

function checkField(){
    if(!window.chrome){
        var sel = document.selection;
        if(sel){
            sel.clear();
        }   
    }else{
        if (window.getSelection) {  
            var sel = window.getSelection().toString();
            if(sel){
                sel.clear();

            }
         }

    }
    var key = window.event.keyCode;
    window.event.returnValue = false;
    // asterisk
    if (key == 42)
        window.event.returnValue = true;
    // first char
    if(window.event.srcElement.value.length == 0){
        // lowercase alphabetical char
        if ((key > 0x60) && (key < 0x7B)){
            window.event.keyCode = key-0x20;
            window.event.returnValue = true;
        / char already uppercase
        } else if((key > 0x40) && (key < 0x5B)){
            window.event.returnValue = true;
        }
    // last 3 chars are numerical
    } else if(window.event.srcElement.value.length > 0 && window.event.srcElement.value.length < 4){
        if(key >= 48 && key <= 57){
            window.event.returnValue = true;
        }
    }
    // line-feed and carriage return
    if(key == 10 || key == 13){
        window.event.returnValue = true;
    }
  }

When it hits the line if (key == 42) it executes the following line window.event.returnValue = true; on previous versions, but not the most up to date version. If I strip out all of the functionality and just set window.event.returnValue = true; then it does execute.

EDIT: Stephen's answer below is a good option to resolve the issue. In this case, it was that the chrome update from v74 to v75 broke the code — I assume because the code above was designed to be used with IE, so perhaps the new Chrome update disabled it; I'm not sure though.

Furthermore, it seemed that using window.event.returnValue and initializing it to false was a factor in the failure, and subsequent attempts to set it to true always failed. Instead, I opted to just return true; where it was previously set to true, and at the end of the method after my conditions, I execute event.preventDefault();. This acts as return false; by canceling the event, preventing successful validation. I also use the event object in the current scope rather than the event in window if possible:

var event = this.event ? this.event : window.event;

This should allow IE instances to execute successfully by pointing event to window.event.

Upvotes: 0

Views: 52

Answers (1)

Stephen P
Stephen P

Reputation: 14800

Here's an example that uses no code at all. It uses HTML5 validation with a pattern: [A-Za-z]{1,4}|\*
The pattern says

[A-Za-z] => upper or lowercase alphabetical character
{1,4}    => repeated 1 to 4 times
|        => ...or...
\*       => a literal asterisk

I use the required attribute so the entry is not considered valid if it's empty.
The style simply tints the input's background red when it is :invalid or green when it is :valid

input[type="search"]:invalid {
    background-color: rgb(255, 200, 200);
}

input[type="search"]:valid {
    background-color: rgb(200, 255, 200);
}
<div class="example">
    <label for="searchbox">Search for:</label>
    <input type="search" name="searchbox" pattern="[A-Za-z]{1,4}|\*" required>
    <button>Search</button>
</div>

You would probably still want to hook up some javascript to this -- maybe the change event to disable the search button when the input is invalid, then enable the button when it becomes valid, but if this is part of a form it would prevent form submission simply because the form contents are not valid.

Upvotes: 2

Related Questions