JS 向文本框中拖拽或粘贴数据后自动添加后缀小尾巴

fengyehongWorld

已于 2022-04-07 20:53:25 修改

阅读量794

点赞数

分类专栏： # JS 文章标签： javascript

于 2022-04-06 22:04:13 首次发布

本文链接：https://blog.csdn.net/feyehong/article/details/124001436

版权

JS 专栏收录该内容

52 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本框,拖拽或粘贴数据添加后缀小尾巴</title>
</head>
<body>
    <input id="ipt1" type="text" /><br>
    <input id="ipt2" type="text" />
</body>
<script>
    document.querySelectorAll("#ipt1,#ipt2").forEach((node) => {

        // 当向文本框粘贴数据的时候,会触发ClipboardEvent事件
        node.addEventListener("paste", (event) => {
            
            const {
                // 获取剪贴板中所有的数据(解构得到的items是一个伪数组)
                clipboardData: {items}, 
                // 当前操作DOM对象
                currentTarget
            } = event;
			
			/*
                ❗❗❗DataTransfer.getData(format)可以快捷获取粘贴的内容
            */
            console.log('当前粘贴的内容为:' + event.clipboardData.getData('text'));

            // 过滤出剪贴板中所有的文字(去除图片等数据)
            const strItemList = Array.from(items).filter(function (item) {
                return item.type.includes('text/plain');
            });

            if (strItemList.length === 0) {
                return;
            }

            // 获取剪贴板中的第一个文字对象
            const strItem = strItemList[0];
            
            // 获取文字对象中的具体文字,需要通过回调函数的方式来获取
            strItem.getAsString((value) => currentTarget.value = value + "神奇的小尾巴~~~")
        });

        // 当向文本框中拖拽数据的时候,会触发DragEvent事件
        node.addEventListener("drop", async (event) => {

            event.preventDefault();

            const {
                // 当前操作的对象
                currentTarget,
                // 拖拽对象有两个属性(files和items),我们向文本框中只能拖拽文本,因此解构出items
                dataTransfer: {items}
            } = event;
			
			/*
                ❗❗❗DataTransfer.getData(format)可以快捷获取拖拽的内容
            */ 
            console.log('当前拖拽的内容为:' + event.dataTransfer.getData('text'));

            // 通过Promise解决回调问题
            const value = await new Promise((resolve, reject) => {
                items[0].getAsString((value) => {
                    resolve(value)
                });
            });
            
            currentTarget.value = value + "神奇的小尾巴~~~";
        });
    });
</script>
</html>

参考资料
1.https://developer.mozilla.org/zh-CN/docs/Web/API/DataTransferItem
2.👍👍👍https://www.zhangxinxu.com/wordpress/2018/09/drag-drop-datatransfer-js/