js访问剪切板，先处理需要粘贴的文本后，再进行文本粘贴

最新推荐文章于 2024-04-17 08:47:34 发布

ITKouSyou

最新推荐文章于 2024-04-17 08:47:34 发布

阅读量3.3k

点赞数

分类专栏： JavaScript/JQuery 文章标签：剪切板 js 监听粘贴事件

本文链接：https://blog.csdn.net/hx765287443/article/details/81390556

版权

JavaScript/JQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

需求:

在一些查询input输入时，用户可能会从某个地方复制查询数据，然后粘贴到查询表单中，这时可能会造成复制的数据有空格，而恰巧你点表单又进行了位数设置，则复制出来的数据可能会因此少一位。

我的解决方案:

监听粘贴动作，在粘贴前把剪切板里的数据进行去空格处理，然后将处理好的数据添加到input文本框内。

示例代码:

<html>
<head>
    <title>粘贴监听测试</title>
<style>
    DIV#editable {
        width: 400px;
        height: 300px;
        border: 1px dashed blue;
    }
</style>
<script type="text/javascript">

    window.onload=function() {
    //粘贴监听，删除剪切板的空格后进行粘贴
    function paste_text(e) {
        debugger;
        if ( e.clipboardData.items ) {
            ele = e.clipboardData.items
            //判断剪切板内复制的是文本
            alert("type:"+ele[0].type+",kind:"+ele[0].kind);
            if(ele[0].type=='text/plain' && ele[0].kind=='string'){
                var text = e.clipboardData.getData('Text');
                alert("剪切板内容:"+text);
                //去空格并截取前11位赋值到input中
                document.getElementById('q_phone').value=text.trim().substring(0,11);
            }
        } else {
            alert('non-chrome');
        }
    }
    document.getElementById('q_phone').onpaste=function(){paste_text(event);return false;};
    }

</script>
</head>
<body >
    
    <input id="q_phone" type="text" class="form-control input-sm" placeholder="粘贴监听区域" maxlength="11">

</body>
</html>

ITKouSyou

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
js访问剪切板，先处理需要粘贴的文本后，再进行文本粘贴

需求:在一些查询input输入时，用户可能会从某个地方复制查询数据，然后粘贴到查询表单中，这时可能会造成复制的数据有空格，而恰巧你点表单又进行了位数设置，则复制出来的数据可能会因此少一位。我的解决方案:监听粘贴动作，在粘贴前把剪切板里的数据进行去空格处理，然后将处理好的数据添加到input文本框内。示例代码:&lt;html&gt;&lt;head&gt; &lt;...
复制链接

扫一扫