实现input框点击复制粘贴， ajax 请求功能原生js_点击按钮粘贴到输入框原生js-优快云博客

本文链接：https://blog.youkuaiyun.com/DumBnessA/article/details/117994337

这篇博客介绍了如何利用原生JavaScript实现HTML input元素的点击复制和粘贴功能，同时讲解了如何进行AJAX请求。通过理解DOM操作和XMLHttpRequest对象，读者可以掌握这些关键的前端交互技术。

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

html结构

<div class="box_header">
            <input id="inputtext" type="text" value="点击生成兑换码">
            <div class="btn_pink">
                <button id="button" onclick="copy()">复制</button>
                <button id="btn">生成</button>
            </div>
        </div>

js结构

 let videoClassId = 12;
        //通过id获取节点，绑定点击事件  发送请求
        document.getElementById('btn').onclick = function(){
        //创建xhr实例对象
        const xhr = new XMLHttpRequest();
        //绑定事件监听，监听响应结果
        xhr.onreadystatechange = function(){
          
            if(xhr.readyState === 4 && xhr.status === 200){
                // 响应成功，得到响应体数据
                document.getElementById('inputtext').value =  xhr.responseText
            }
        }
        //设置请求信息
        xhr.open('GET','输入地址信息' + 携带参数);
        //发送请求
        xhr.send();
        }
        //点击请求

 function copy(){
            // 获取输入框元素
            let input = document.getElementById('inputtext')

            // 选中元素中的文本（必须可编辑）
            input.select()

            // 检测复制命令返回值（是否可用）
            if(document.execCommand('copy')){
            document.execCommand('copy')//执行复制到剪贴板
                window.alert('已复制！')//反馈信息
            }

            // 无法复制（不可用）
            else{
            window.alert('复制失败！')//反馈信息
            }
        }
        //点击复制