使用jquery在文本字段中禁用字母表的复制粘贴
在我的项目中,我的文本字段只取数值。但是当我使用ctl + c复制字母并使用ctl + v粘贴时,它将允许文本字段中的字母表。所以我禁用了使用以下内容的复制和粘贴码。
$('input').bind('copy paste', function(e) { e.preventDefault(); });
但我想只防止字母表。这意味着我想复制粘贴数值不是字母。
试试这个function。 这可能不是你想要的,但你可以做一些事情。 我之前已经这样做了并发布在我的博客上。
JS:
$(function(){ $(".numericOnly").bind('keypress',function(e){ if(e.keyCode == '9' || e.keyCode == '16'){ return; } var code; if (e.keyCode) code = e.keyCode; else if (e.which) code = e.which; if(e.which == 46) return false; if (code == 8 || code == 46) return true; if (code < 48 || code > 57) return false; } ); $(".numericOnly").bind("paste",function(e) { e.preventDefault(); }); $(".numericOnly").bind('mouseenter',function(e){ var val = $(this).val(); if (val!='0'){ val=val.replace(/[^0-9]+/g, "") $(this).val(val); } }); });
HTML:
这将允许您仅输入数字值。 你甚至无法复制粘贴和拖放。
DEMO
代码链接
看了一下事件对象和“duckduckgoing”之后:
$('input').on('paste', function (event) { if (event.originalEvent.clipboardData.getData('Text').match(/[^\d]/)) { event.preventDefault(); } });
我不知道这是什么跨浏览器,但如果向后兼容性没有问题,请继续使用它。
在codepen上查看
PS:我在mac os 10.6上使用谷歌chrome版本22
编辑:firefox 13没有clipboardData对象,即10也没有,safari 5.1.2支持它(所以它是一个webkitfunction)。
这个函数适用于jQuery。 它只允许数字到文本框代码:
jQuery.fn.filter = function() { $(this).keydown(function (e) { if (e.shiftKey || e.ctrlKey || e.altKey) { // if shift, ctrl or alt keys held down e.preventDefault(); // Prevent character input } else { var n = e.keyCode; if (!((n == 8) // backspace || (n == 46) // delete || (n >= 35 && n <= 40) // arrow keys/home/end || (n >= 48 && n <= 57) // numbers on keyboard || (n >= 96 && n <= 105)) // number on keypad ) { e.preventDefault(); // Prevent character input } } $(document).mousedown(function(e){ if( e.button == 2 ) { e.preventDefault(); // Prevent character input } else { var n = e.keyCode; if (!((n == 8) // backspace || (n == 46) // delete || (n >= 35 && n <= 40) // arrow keys/home/end || (n >= 48 && n <= 57) // numbers on keyboard || (n >= 96 && n <= 105)) // number on keypad ) { e.preventDefault(); } } }); }
我确定你的需要,但试试这个。 如果它不是你想要的sry。
我有一个有趣的解决方法来解决你的问题。 对于paste
事件,您可以使用以下代码:
$("input").on("paste", function(e) { var that = this; that.style.color = "#fff"; // field background color setTimeout(function() { that.value = that.value.replace(/\D/g, ""); that.style.color = "#000"; // normal field font color }, 100); });
演示: http : //jsfiddle.net/dgWDX/
jaychapani提供的解决方案几乎适用于该用户的特定问题。 但是,它可以防止粘贴任何东西,甚至数字。
我略微修改了代码,现在Javascript(a)允许用户粘贴数字,但(b)不允许使用字母和特殊字符。 我从上面jaychapani的例子中删除了以下内容:
$(".numericOnly").bind("paste",function(e) { e.preventDefault(); });
最终的代码是:
$(function(){ $(".numericOnly").bind('keypress',function(e){ if(e.keyCode == '9' || e.keyCode == '16'){ return; } var code; if (e.keyCode) code = e.keyCode; else if (e.which) code = e.which; if(e.which == 46) return false; if (code == 8 || code == 46) return true; if (code < 48 || code > 57) return false; } ); $(".numericOnly").bind('mouseenter',function(e){ var val = $(this).val(); if (val!='0'){ val=val.replace(/[^0-9]+/g, "") $(this).val(val); } }); });
这有效,并且在使用Ctl + v或菜单粘贴时会拒绝字母和特殊字符。 但是,我注意到,在用户在表单拒绝之前粘贴不需要的字符后,有时会出现延迟。
通常,拒绝不需要的字符只会在一两秒后发生。 但是有一些实例在文本被清除之前等待了大约10秒。 我猜这是因为(a)我很清醒地观察行为和一些奇怪的缓存行为导致Javascript的延迟快速工作或(b)Javascript的某些循环问题或(c)一些组合的都。
这在大多数生产环境中都可以正常工作。 我怀疑用户在提交之前反复刷新页面。
但是,我想知道是否有更优化的解决方案。 关于改进这一点的建议将受到欢迎。
我已经更新了jaychapani的答案。 在这里,我添加了对箭头键的支持。 并防止按%
&
(
键。
$("input").bind('keypress', function (e) { if (e.keyCode == '9' || e.keyCode == '16') { return; } var code; if (e.keyCode) code = e.keyCode; else if (e.which) code = e.which; if (e.which == 46) return false; if (e.which == 33 || e.which == 64 || e.which == 35 || e.which == 36 || e.which == 37 || e.which == 94 || e.which == 38 || e.which == 42 || e.which == 40 || e.which == 41) return false; if (code == 8 || code == 46) return true; if (code == 37 || code == 38 || code == 39 || code == 40) return true; if (code < 48 || code > 57) return false; }); $("input").bind("paste", function (e) { e.preventDefault(); }); $("input").bind('mouseenter', function (e) { var val = $(this).val(); if (val != '0') { val = val.replace(/[^0-9]+/g, "") $(this).val(val); } });
JSFiddle演示
谢谢。