+
95
-

回答

这个要结合第三方的翻译api接口,百度、阿里云都有,可以自己去申请,最后集成在html代码中,示例如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自动翻译输入框</title>
    <style>
        #translation {
            margin-top: 10px;
            font-size: 16px;
            color: #333;
        }
    </style>
</head>
<body>
    <input type="text" id="inputBox" placeholder="输入中文...">
    <div id="translation"></div>

    <script>
        const inputBox = document.getElementById('inputBox');
        const translationDiv = document.getElementById('translation');

        inputBox.addEventListener('input', async (event) => {
            const text = event.target.value;
            if (text) {
                const translatedText = await translateText(text);
                translationDiv.textContent = translatedText;
            } else {
                translationDiv.textContent = '';
            }
        });

        async function translateText(text) {
            // 这里使用一个假设的翻译API,你需要替换为你自己的翻译API
            const response = await fetch('翻译api接口', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ text: text, target_language: 'en' }),
            });

            const data = await response.json();
            return data.translated_text;
        }
    </script>
</body>
</html>

网友回复

我知道答案,我要回答