我公司的每个人都在使用上周的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
来成功执行。
答案 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
事件,当输入无效时禁用搜索按钮,然后在输入变为无效时启用该按钮有效,但是如果这是表单的一部分,则仅会因为表单内容无效而阻止提交表单。