Question

我在输入中抓取粘贴的文字时遇到了一些麻烦：

 <input type="text" id="myid" val="default">
 $('#myid').on('paste',function(){
        console.log($('#myid').val());
 });

console.log显示：

default

我如何catch粘贴的文字并准备好使用？

Answer 1

接受的答案实际上是hacky和丑陋，似乎经常建议stackoverflow上的粘贴事件。我认为更好的方法是this

$('#someInput').bind('paste', function(e) {
    var data = e.originalEvent.clipboardData.getData('Text');
    //IE9 Equivalent ==> window.clipboardData.getData("Text");   
});

Answer 2

现代浏览器现在支持input事件，该事件将在粘贴内容后触发

$('#myid').on('input', function() {
    console.log($('#myid').val()); 
});

粘贴到输入时，在值有更新时间之前触发paste事件解决此问题的一种方法是推迟获取值，直到输入有时间更新：

$('#myid').on('paste', function() {
    setTimeout(function () { 
        console.log($('#myid').val()); 
    }, 100);
});

还可以通过访问event.clipboardData直接从剪贴板获取数据，而不是从输入值获取数据，但是这种技术是实验性的，并非在所有浏览器中都支持，而且在我看来比使用更加hacky input事件，甚至是简单的超时。

Answer 3

使用“输入”可避免粘贴时出现超时错误，并且比更改（粘贴或搜索事件等操作无法使用）要好。

$('input').on('input', function(e) {
    var type = e.originalEvent.inputType;
    if (typeof(type) == 'undefined'){
       type = 'search';
    switch(type){
    case 'search':
    case 'deleteByCut':
    case 'insertText':
    case 'insertFromPaste':
    case 'deleteContentBackward':
       var content = $(this).val();
    }
});

搜索是一种特殊情况，不会生成输入类型。它在功能上与'deleteByCut'基本相同，因为它清除了字段。

当然，如有必要，您可以针对每种情况使用不同的处理程序。

Answer 4

$('#myid').on('paste' , function(e){
   get_content(this);
});

function get_content(gelen){
var value_input = $(gelen).val();
document.getElementById("write-value").innerHTML = value_input;
console.log(value_input);
}

input{ width: calc(100% - 16px); padding:8px; font-size:large}
div{ color:red; margin-top:16px; padding:8px; font-size:large}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="myid" onkeyUP="get_content(this)" >

<div id="write-value">
</div>

Answer 5

更大的图片，我想您通常需要三个事件：

用户粘贴时
当用户点击
当文本框失去焦点时。

我不希望on('input')，因为这会为每次按键引发一个事件。

这样，您会收到一个事件，用户完成操作是在文本框中输入内容。

$(document).ready(function () {

            $('#myid').keydown(function (e) {
                var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
                if (key == 13) {
                    e.preventDefault();
                    alert($(this).val());
                }
            }).on("change", function () {
                alert($(this).val());
            }).on("paste", function (e) {
                var _this = this;
                // Short pause to wait for paste to complete
                setTimeout(function () {
                    alert($(_this).val());
                }, 100);
            });
        });

Answer 6

尝试此操作或添加timeOut：

   $('#myid').on('paste',function(){
           console.log(this.value);
    });

jquery如何获取粘贴的内容

6 个答案: