我正在寻找一种方法来对我粘贴到浏览器中的输入进行消毒，这在jQuery中可行吗？
我到目前为止已经想出了这个。
$(this).live(pasteEventName, function(e) {
// this is where i would like to sanitize my input
return false;
}
Unfortunately my development has come to a screeching hold because of this "minor" issue. I would really make me a happy camper if someone could point me to the right direction.
我使用以下代码勉强修复了它：
$("#editor").live( input paste ,function(e){
if(e.target.id == editor ) {
$( <textarea></textarea> ).attr( id , paste ).appendTo( #editMode );
$("#paste").focus();
setTimeout($(this).paste, 250);
}
});
现在我只需要存储插入符位置，然后追加到该位置，然后我就准备好了......我想 :)
好的，我刚刚碰到了同样的问题...我绕了一个很长的路。
$( input ).on( paste , function () {
var element = this;
setTimeout(function () {
var text = $(element).val();
// do something with text
}, 100);
});
只需要暂停一下，直到.val()函数可以被填充。
Sorry, "E." does not provide enough context for me to translate it accurately. Please provide more information.
你实际上可以直接从事件中获取值。不过如何获得它有点晦涩。
如果你不想它通过，请返回false。
$(this).on( paste , function(e) {
var pasteData = e.originalEvent.clipboardData.getData( text )
});
为了跨平台兼容性，它应该处理oninput和onpropertychange事件：
$ (something).bind ("input propertychange", function (e) {
// check for paste as in example above and
// do something
})
嗯... 我认为你可以使用e.clipboardData来捕获粘贴的数据。如果行不通，请看看这里。
$(this).live("paste", function(e) {
alert(e.clipboardData); // [object Clipboard]
});
监听粘贴事件并设置 keyup 事件侦听器。在 keyup 时捕获 value 并移除 keyup 事件侦听器。
$( .inputTextArea ).bind( paste , function (e){
$(e.target).keyup(getInput);
});
function getInput(e){
var inputText = $(e.target).val();
$(e.target).unbind( keyup );
}
$("#textboxid").on( input propertychange , function () {
//perform operation
});
它会很好地运作。
这已经越来越接近您想要的了。
function sanitize(s) {
return s.replace(/foo/g, "~");
};
$(function() {
$(":text, textarea").bind("input paste", function(e) {
try {
clipboardData.setData("text",
sanitize(clipboardData.getData("text"))
);
} catch (e) {
$(this).val( sanitize( $(this).val() ) );
}
});
});
请注意，在除IE以外的浏览器上找不到clipboardData对象时，您当前正在获取元素的完整值+剪贴板的值。
如果您真的只关心哪些数据被粘贴到元素中，您可能可以在输入之前和输入之后对这两个值进行一些额外的步骤来将它们进行区分。
$( ).bind( input propertychange , function() {....});
这将适用于鼠标粘贴事件。
比较字段的原始值和更改后的值，并将差异作为粘贴值减去如何？即使字段中存在现有文本，这也可以正确捕获粘贴的文本。
将此翻译成中文：http://jsfiddle.net/6b7sK/ (jiāng cǐ fānyì chéng zhōngwén: 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);
});
});
这个代码对我来说是工作的，可以通过右键粘贴或直接复制粘贴。
$( .textbox ).on( paste input propertychange , function (e) {
$(this).val( $(this).val().replace(/[^0-9.]/g, ) );
})
当我粘贴部分1：劳动力成本时，它在文本框中变为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();
}
});
看看这个例子：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
})
document.addEventListener( paste , function(e){
if(e.clipboardData.types.indexOf( text/html ) > -1){
processDataFromClipboard(e.clipboardData.getData( text/html ));
e.preventDefault();
...
}
});
这种方法使用jQuery的contents().unwrap()。
After a given timeout scan through all the contents unwrapping tags that don t have the class that you set earlier. Note: This method does not remove self closing tags like
See an example below.
//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);
脚本用于从所有类为 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 (
or
) 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(/(
|
|
)/gm, ## ).replace(/(##)/gm,"
");
}
}
这被证明是相当难以捉摸的。在粘贴事件函数内部执行代码之前，输入值没有更新。我尝试从粘贴事件函数内部调用其他事件，但在任何事件的函数内部，输入值仍未与复制的文本更新。除了keyup事件之外的所有事件都是如此。如果您从粘贴事件函数内部调用keyup，则可以在keyup事件函数内部对复制的文本进行消毒。就像这样...
$( :input ).live
(
input paste ,
function(e)
{
$(this).keyup();
}
);
$( :input ).live
(
keyup ,
function(e)
{
// sanitize pasted text here
}
);
这里有一个警告。在Firefox中，如果在每个键盘按键之后重置输入文本，如果文本长度超过了输入宽度允许的可视区域，则在每个键盘按键之后重置值会破坏浏览器的功能，即自动将文本滚动到文本末尾的光标位置。相反，文本会滚动回到开头，光标消失在视野之外。
这里有一个注意事项。在Firefox中，如果您在每个键盘按键后重置输入文本，如果输入宽度所允许的可视区域长度小于文本长度，则在每个键盘按键后重置值会破坏浏览器的自动滚动到文本末尾位置的功能。相反，文本会滚回到开头，光标变得不可见。
function scroll(elementToBeScrolled)
{
//this will reset the scroll to the bottom of the viewable area.
elementToBeScrolled.topscroll = elementToBeScrolled.scrollheight;
}