如何做语音输入的弹出框界面效果

最新推荐文章于 2024-09-19 10:50:29 发布

loveshijun

最新推荐文章于 2024-09-19 10:50:29 发布

阅读量955

点赞数

分类专栏： html 文章标签：弹出框

本文链接：https://blog.youkuaiyun.com/loveshijun/article/details/90379112

版权

在项目中实施语音输入功能时，需要创建一个弹出框展示转化的文字。本文记录了使用div实现弹出框效果，通过捕获blur事件来隐藏弹出框，阻止子元素点击导致的隐藏问题，以及弹出框选中状态的设置方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在做公司一个项目的时候，要用到语音输入功能，将人说出来的语音转化成文字放到文本框里面。为此，需要有一个弹出框功能，点击弹出框以外的任何区域，隐藏弹出框，在这个过程中遇到几个问题，现记录解决过程如下：
1、问题一：弹出框用什么做？我选择使用一个div，通过隐藏和显示div来实现弹出效果。
2、问题二：如何做到点击弹出框的以外区域隐藏弹出框？使用div的blur()方法，当鼠标点击网页上其他区域时，触发blur方法，在blur的回调函数里面将div设置为不可见。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: #3295F2;
        }
    </style>
</head>
<body>
    <div class="box" id="box" tabindex="1"></div>
    <script>
        document.getElementById('box').onblur = function(){
            //alert('div blur');
            document.getElementById('box'