Chrome的最新版本已禁用文本字段输入

时间:2019-07-22 20:10:15

标签: javascript google-chrome

我公司的每个人都在使用上周的Chrome版本75.0.3770.142。本地Java EE应用程序中有一个特定的文本字段,不再需要输入。以前的版本仍然可以成功运行,例如内部版本74.0.3729.169。我一直在浏览onkeypress函数调用,看来罪魁祸首是window.event.returnValue。有人有更多信息吗?是弃用还是禁用?我正在浏览构建日志,没有看到任何提及。

以下代码正在运行。在搜索过程中使用。我没有写它,它是14年前写的,创建者已经不在公司了。应该确保用户使用的是chrome,并且他们的输入有效。即:以字母字符开头,最长不超过4个字符,并且允许使用星号获取所有结果:

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;
    }
  }

当它碰到行if (key == 42)时,它将在以前的版本上执行下面的行window.event.returnValue = true;,但不是最新版本。如果我剥离所有功能并仅设置window.event.returnValue = true;,则它会执行。


编辑:下面斯蒂芬的答案是解决该问题的一个不错的选择。在这种情况下,是从v74到v75的chrome更新破坏了代码—我想是因为上面的代码设计用于IE,所以也许新的Chrome更新禁用了它;我不确定。

此外,似乎使用window.event.returnValue并将其初始化为false是失败的一个因素,随后尝试将其设置为true总是失败。相反,我只选择了先前设置为return true;的{​​{1}},并在条件确定后的方法结尾处执行了true。这可以通过取消事件来充当event.preventDefault();,从而阻止成功验证。我还尽可能在当前范围内使用return false;对象,而不是在event中使用event对象:

window

这应该允许IE实例通过将var event = this.event ? this.event : window.event;指向event来成功执行。

1 个答案:

答案 0 :(得分:1)

这是一个完全不使用代码的示例。它使用HTML5验证和以下模式:[A-Za-z]{1,4}|\*
模式说

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

我使用required属性,因此如果该条目为空,则认为该条目无效。
样式只是将输入的背景:invalid涂成红色,而将: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>

您可能仍然想要为此添加一些JavaScript-可能是change事件,当输入无效时禁用搜索按钮,然后在输入变为无效时启用该按钮有效,但是如果这是表单的一部分,则仅会因为表单内容无效而阻止提交表单。