VoiceOver不能在Chrome中读取window.alert中的文本

基础概念

VoiceOver 是 macOS 上的一个屏幕阅读器，用于帮助视力障碍的用户访问计算机界面。Chrome 是一个流行的网页浏览器。window.alert 是一个 JavaScript 函数，用于在浏览器中显示一个模态对话框，通常包含一条消息和一个“确定”按钮。

问题原因

VoiceOver 在 Chrome 中可能无法正确读取 window.alert 中的文本，这通常是由于 Chrome 浏览器对 alert 对话框的渲染和处理方式导致的。VoiceOver 可能无法正确识别或获取 alert 对话框中的文本内容。

解决方法

方法一：使用自定义模态对话框

为了避免 window.alert 的限制，可以使用自定义的模态对话框，并确保 VoiceOver 能够正确读取其中的文本。以下是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Alert</title>
    <style>
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4);
        }
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <button onclick="showModal()">Show Alert</button>

    <div id="myModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal()">&times;</span>
            <p>This is a custom alert message.</p>
        </div>
    </div>

    <script>
        function showModal() {
            document.getElementById('myModal').style.display = 'block';
            document.getElementById('myModal').focus();
        }

        function closeModal() {
            document.getElementById('myModal').style.display = 'none';
        }

        window.onclick = function(event) {
            if (event.target == document.getElementById('myModal')) {
                closeModal();
            }
        };
    </script>
</body>
</html>

在这个示例中，我们创建了一个自定义的模态对话框，并通过 JavaScript 控制其显示和隐藏。这样可以确保 VoiceOver 能够正确读取对话框中的文本。

方法二：使用 `window.confirm` 和 `window.prompt`

如果需要用户交互，可以考虑使用 window.confirm 或 window.prompt，这些方法在某些情况下可能比 window.alert 更容易被 VoiceOver 识别。

window.confirm("Are you sure?");
window.prompt("Enter your name:");

参考链接

通过以上方法，可以有效解决 VoiceOver 在 Chrome 中无法读取 window.alert 中文本的问题。

在提到上述的概念之前，首先想说说javascript中函数的隐含参数： arguments arguments 该对象代表正在执行的函数和调用它的函数的参数。[function.]arguments[n]参数 function：选项。当前正在执行的 Function 对象的名字。 n ：选项。要传递给 Function 对象的从0开始的参数值索引。说明Arguments是进行函数调用时，除了指定的参数外，还另外创建的一个隐藏对象。Arguments是一个类似数组但不是数组的对象，说它类似数组是因为其具有数

HTML5学堂：无论是PC还是移动端，系统自带alert样式总是让人感觉很丑陋，今天就教大家如何修改alert弹窗样式。只能自定一个弹窗样式首先必须明白的一点是，alert()只是一个方法，而这个方法内部是native code，这是我们无法修改的部分，而最终暴露的只有这个alert()方法名字而已，你甚至拿不到alert的属性，因此要真正意义上的做到修改alert样式是不可行的。有了以上这个条件基础，我们能做的只有重写alert()方法，替换掉系统自带的alert()方法。一行代码替换alert(

BOM 1.window对象 2.location对象 3.history对象 BOM也叫浏览器对象模型，它提供了很多对象，用于访问浏览器的功能。BOM缺少规范，每个浏览器提供商又按照自己想法去扩展它，那么浏览器共有对象就成了事实的标准。所以，BOM本身是没有标准的或者还没有哪个组织去标准它。一．window对象 BOM的核心对象是window，它表示浏览器的一个实例。window对象处于JavaScript结构的最顶层，对于每个打开的窗口，系统都会自动为其定义 window 对象。 1.对象的属性

前端已经被玩儿坏了！像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了，像用||操作符给变量赋默认值也是人尽皆知的旧闻了，今天看到Quora上一个帖子，瞬间又GET了好多前端技能，一些属于技巧，一些则是闻所未闻的冷知识，一时间还消化不过来。现分类整理出来分享给大家，也补充了一些平时的积累和扩展了一些内容。 HTML篇浏览器地址栏运行JavaScript代码这个很多人应该还是知道的，在浏览器地址栏可以直接运行JavaScript代码，做法是以 javascript: 开头后跟

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

VoiceOver不能在Chrome中读取window.alert中的文本

基础概念

问题原因

解决方法

方法一：使用自定义模态对话框

方法二：使用 window.confirm 和 window.prompt

参考链接

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

方法二：使用 `window.confirm` 和 `window.prompt`