抓住粘贴输入

时间:2009-03-26 18:24:53

标签: jquery paste sanitize

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

到目前为止,我已经设法解决了这个问题:

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

不幸的是,由于这个“次要”问题,我的发展已经蠢蠢欲动。 如果有人能指出我正确的方向,我真的会让我成为一个快乐的露营者。

17 个答案:

答案 0 :(得分:321)

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

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

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

电子。

答案 1 :(得分:59)

您实际上可以直接从event获取值。尽管如此,它有点迟钝。

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

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

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

});

答案 2 :(得分:40)

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

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

答案 3 :(得分:18)

我使用以下代码修复它:

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

现在我只需要存放插入符号位置并附加到该位置然后我就完成了......我想:)

答案 4 :(得分:9)

嗯...我你可以使用e.clipboardData来捕获被粘贴的数据。如果没有平局,请查看here

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

答案 5 :(得分:9)

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

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

答案 6 :(得分:6)

这越来越接近你想要的了。

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以外的浏览器上),您当前正在获取元素的完整值+剪贴板值。

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

答案 7 :(得分:5)

$("#textboxid").on('input propertychange', function () {
    //perform operation
        });

它会正常工作。

答案 8 :(得分:5)

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

   $('.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();
      }
    });

答案 9 :(得分:5)

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

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 :(得分:5)

 $('').bind('input propertychange', function() {....});                      

这适用于鼠标粘贴事件。

答案 11 :(得分:4)

document.addEventListener('paste', function(e){
    if(e.clipboardData.types.indexOf('text/html') > -1){
        processDataFromClipboard(e.clipboardData.getData('text/html'));
        e.preventDefault();

        ...
    }
});

此外:

答案 12 :(得分:3)

请参阅此示例:http://www.p2e.dk/diverse/detectPaste.htm

它必须跟踪oninput事件的每个更改,然后检查它是否是字符串比较粘贴。哦,在IE中有一个onpaste事件。所以:

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

答案 13 :(得分:1)

此方法使用jqueries contents()。unwrap()。

  1. 首先,检测粘贴事件
  2. 为我们正在粘贴的元素中的标记添加一个唯一的类。
  3. 在给定超时后扫描所有内容展开标签,这些标签没有您之前设置的类。注意:此方法不会删除像WB这样的自关闭标记 请参阅下面的示例。

    //find all children .find('*') and add the class .within .addClass("within") to all tags
    $('#answer_text').find('*').each(function () {
    $(this).addClass("within");
    });
    setTimeout(function() {
    $('#answer_text').find('*').each(function () {
        //if the current child does not have the specified class unwrap its contents
        $(this).not(".within").contents().unwrap();
    });
    }, 0);
    

答案 14 :(得分:0)

这被证明是非常虚幻的。在粘贴事件函数内执行代码之前,不会更新输入的值。我尝试从粘贴事件函数中调用其他事件,但输入值仍未使用任何事件函数内的粘贴文本进行更新。这是除了密钥之外的所有事件。如果从粘贴事件函数中调用keyup,则可以从keyup事件函数中清除粘贴的文本。像这样...

$(':input').live
(
    'input paste',
    function(e)
    {
        $(this).keyup();
    }
);

$(':input').live
(
    'keyup',
    function(e)
    {
        // sanitize pasted text here
    }
);

这里有一点需要注意。在Firefox中,如果您在每个键盘上重置输入文本,如果文本长于输入宽度允许的可视区域,则重置每个键盘上的值会破坏浏览器功能,从而自动将文本滚动到插入位置的插入位置。文末。相反,文本会滚动回到开头,使插入符号脱离视图。

答案 15 :(得分:-1)

使用类portlet-form-input-field从所有字段中删除特殊字符的脚本:

// Remove special chars from input field on paste
jQuery('.portlet-form-input-field').bind('paste', function(e) {
    var textInput = jQuery(this);
    setTimeout(function() {
        textInput.val(replaceSingleEndOfLineCharactersInString(textInput.val()));
    }, 200);
});

function replaceSingleEndOfLineCharactersInString(value) {
    <%
        // deal with end-of-line characters (\n or \r\n) that will affect string length calculation,
        // also remove all non-printable control characters that can cause XML validation errors
    %>
    if (value != "") {
        value = value.replace(/(\x00|\x01|\x02|\x03|\x04|\x05|\x06|\x07|\x08|\x0B|\x0C|\x0E|\x0F|\x10|\x11|\x12|\x13|\x14|\x15|\x16|\x17|\x18|\x19|\x1A|\x1B|\x1C|\x1D|\x1E|\x1F|\x7F)/gm,'');
        return value = value.replace(/(\r\n|\n|\r)/gm,'##').replace(/(\#\#)/gm,"\r\n");
    }
}

答案 16 :(得分:-2)

  

这里有一点需要注意。在Firefox中,如果您在每个键盘上重置输入文本,如果文本长于输入宽度允许的可视区域,则重置每个键盘上的值会破坏浏览器功能,从而自动将文本滚动到插入位置的插入位置。文末。相反,文本会滚动回到开头,使插入符号脱离视图。

function scroll(elementToBeScrolled) 
{
     //this will reset the scroll to the bottom of the viewable area. 
     elementToBeScrolled.topscroll = elementToBeScrolled.scrollheight;
}