HTML5 表单验证不适用于 Chrome 中的自动对焦

发布于 2024-09-10 19:18:37 字数 767 浏览 6 评论 0原文

我不知道这是否是 Chrome 中的某种错误，或者（很可能）是我做错了什么。如果输入的不是数字，我试图使文本框背景颜色变成红色。

我有这个 html 页面：

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>iSPT</title>
    <link rel="stylesheet" type="text/css" href="style2.css" />
</head>
<body>
    <form >
        <input type="number" autofocus />
    </form>
</body>
</html>

这是 style2.css：

@CHARSET "ISO-8859-1";
:invalid{ 
    background-color: red; 
}

这不起作用，如上所示（如果我输入字母，该框不会变成红色）。我有两种方法让它发挥作用。第一个是从输入中删除自动对焦属性。

或者，如果我将外部文件中的 CSS 内联放入 HTML 头中，验证也会起作用。

我希望能够保留自动对焦和外部 css 表。

有什么想法吗？

原文

I don't know if this could be some sort of bug in Chrome or (more than likely) it is me doing something wrong.
I am trying to make a textbox background color turn red if what is entered is not a number.

I have this html page:

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>iSPT</title>
    <link rel="stylesheet" type="text/css" href="style2.css" />
</head>
<body>
    <form >
        <input type="number" autofocus />
    </form>
</body>
</html>

And this is style2.css:

@CHARSET "ISO-8859-1";
:invalid{ 
    background-color: red; 
}

This does not work as shown above(the box does not turn red if I enter letters). There are two ways I have gotten it to work.
The first was by removing the autofocus attribute from the input.

Alternatively if I put the CSS from the external file inline in the HTML head, the validation works then as well.

I would like to be able to keep the autofocus and the external css sheet though.

Any ideas?

分享到QQ

分享到微博