当前位置:  开发笔记 > 编程语言 > 正文

抓住粘贴输入

如何解决《抓住粘贴输入》经验,为你挑选了11个好方法。

我正在寻找一种方法来清理我粘贴到浏览器中的输入,这可能与jQuery有关吗?

到目前为止,我已经设法做到了这一点:

$(this).live(pasteEventName, function(e) {
 // this is where i would like to sanitize my input
 return false;
}

不幸的是,由于这个"次要"问题,我的发展已经开始戛然而止.如果有人能指出我正确的方向,我真的会让我成为一个快乐的露营者.



1> 小智..:

好吧,刚刚碰到了同样的问题..我走了很长的路

$('input').on('paste', function () {
  var element = this;
  setTimeout(function () {
    var text = $(element).val();
    // do something with text
  }, 100);
});

只需要一个小的超时,直到.val()func可以填充.

E.


工作完美,谢谢.超时0也可以正常工作.该函数只需要延迟到下一个循环.
如果textarea中有文本已经粘贴,你只想要粘贴的文本怎么办?
@ user563811:请注意HTML5中的官方最短超时为4毫秒.
刚刚处于类似情况.超时是因为粘贴事件不是立即的,但是粘贴剪贴板内容需要几毫秒.
就像sharif所说,0ms仍然将事件放在堆栈的底部.

2> Charles Haro..:

您实际上可以直接从事件中获取值.尽管如此,它有点迟钝.

如果您不希望它通过,则返回false.

$(this).on('paste', function(e) {

  var pasteData = e.originalEvent.clipboardData.getData('text')

});


但是,请注意,仅当您使用jQuery处理事件时才需要“ originalEvent”属性。您可以在纯JavaScript中执行`e.clipboardData.getData('text')`。
这是要走的路

3> 小智..:

对于跨平台兼容性,它应该处理oninput和onpropertychange事件:

$ (something).bind ("input propertychange", function (e) {
    // check for paste as in example above and
    // do something
})


美丽的解决方案,作为粘贴和键盘事件捕获.**注意:**如果突出显示输入内容,则会导致事件函数触发两次_然后在_at至少IE8_中键入内容(在许多情况下不重要,但在其他情况下可能非常重要).

4> Christoffer ..:

我通过使用以下代码修复它:

$("#editor").live('input paste',function(e){
    if(e.target.id == 'editor') {
        $('').attr('id', 'paste').appendTo('#editMode');
        $("#paste").focus();
        setTimeout($(this).paste, 250);
    }
});

现在我只需要存放插入位置并追加到那个位置然后我就全部设置了......我想:)



5> moff..:

嗯......我你可以e.clipboardData用来捕捉被粘贴的数据.如果它没有成功,请看看这里.

$(this).live("paste", function(e) {
    alert(e.clipboardData); // [object Clipboard]
});


当我在Safari中运行时,我得到'undefined':(
仅限Internet Explorer!

6> Eric..:

侦听粘贴事件并设置keyup事件侦听器.在keyup上,捕获值并删除keyup事件侦听器.

$('.inputTextArea').bind('paste', function (e){
    $(e.target).keyup(getInput);
});
function getInput(e){
    var inputText = $(e.target).val();
    $(e.target).unbind('keyup');
}


这非常好,但它不适用于右键单击粘贴.

7> Mister Lucky..:

这越来越接近你想要的.

function sanitize(s) {
  return s.replace(/\bfoo\b/g, "~"); 
};

$(function() {
 $(":text, textarea").bind("input paste", function(e) {
   try {
     clipboardData.setData("text",
       sanitize(clipboardData.getData("text"))
     );
   } catch (e) {
     $(this).val( sanitize( $(this).val() ) );
   }
 });
});

请注意,当找不到clipboardData对象时(在IE以外的浏览器上),您当前正在获取元素的完整值+剪贴板值.

在输入之前和输入之后,如果你真的只是在真正粘贴到元素中的数据之后,你可以做一些额外的步骤来区分这两个值.



8> 小智..:
$("#textboxid").on('input propertychange', function () {
    //perform operation
        });

它会工作正常.



9> 小智..:

如何比较字段的原始值和字段的更改值,并将差异作为粘贴值减去?即使字段中存在现有文本,也会正确捕获粘贴的文本.

http://jsfiddle.net/6b7sK/

function text_diff(first, second) {
    var start = 0;
    while (start < first.length && first[start] == second[start]) {
        ++start;
    }
    var end = 0;
    while (first.length - end > start && first[first.length - end - 1] == second[second.length - end - 1]) {
        ++end;
    }
    end = second.length - end;
    return second.substr(start, end - start);
}
$('textarea').bind('paste', function () {
    var self = $(this);
    var orig = self.val();
    setTimeout(function () {
        var pasted = text_diff(orig, $(self).val());
        console.log(pasted);
    });
});



10> Abhiram..:
 $('').bind('input propertychange', function() {....});                      

这适用于鼠标粘贴事件.



11> RN Kushwaha..:

这段代码适用于我从右键单击粘贴或直接复制粘贴

   $('.textbox').on('paste input propertychange', function (e) {
        $(this).val( $(this).val().replace(/[^0-9.]/g, '') );
    })

当我粘贴Section 1: Labour Cost它变成1文本框.

要仅允许浮点值,我使用此代码

 //only decimal
    $('.textbox').keypress(function(e) {
        if(e.which == 46 && $(this).val().indexOf('.') != -1) {
            e.preventDefault();
        } 
       if (e.which == 8 || e.which == 46) {
            return true;
       } else if ( e.which < 48 || e.which > 57) {
            e.preventDefault();
      }
    });

推荐阅读
爱唱歌的郭少文_
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有